-
AuthorPosts
-
April 30, 2015 at 3:17 pm #437506
Hi, you guys have already helped me a lot with a lot of questions, but I have a follow-up question about a previous topic.
https://kriesi.at/support/topic/add-extra-logos-in-head-space/
The extra text in my header space now shows up as 1st line black, 2nd line blue like a hyperlink.
I would like to change the color. I want the first line to be blue (not a hyperlink but this color: #51b2ea) and the second line to be orange (#fd8917 stil a hyperlink). Is there any way to do this? I’ve included below the quick CSS lines I currently use. Also the lines in my functions.php.
My seconds follow-up question to this is the placement of the NRTO logo and the Social links. Can I put the NRTO all the way on the right and the social links where the NRTO was? (So essentially swap them out for each other).
Thanks in advance!
#scroll-top-link {display: none; } strong.second-logo { float: right!important; position: relative; margin-right: 21%; } .second-logo img{ padding-top:50px; } .header-scrolled .second-logo img { padding-top: 10px; } #top .social_bookmarks li a { font-size: 25px; } @media only screen and (max-width: 768px) { #top .social_bookmarks li a { font-size: 18px; } strong.second-logo { margin-right: 30%; }} #top .social_bookmarks li a { color: #5cb4e4; } #top .avia-logo-element-container .slide-image { background: transparent !important ; } .main_color input[type='submit'] { background-color: #51b3ea; color: white; border-color: #51b3ea; } .main_color input[type='submit']:hover { background-color: ##51b3ea; color: white; border-color: #51b3ea; } .header-message { position: relative; top: 80px; left: 38%; } @media only screen and (max-width: 769px) { .header-message { left: 40%; }} @media only screen and (max-width: 480px) { .header-message { top: 190px; left: 13%; }} .header-message { margin-top: -44px; } .header-scrolled .header-message { top: 50px; } .header-message * { font-weight: bold !important; } .header-message { z-index: 99; } .header-scrolled .logo img,.header-scrolled .second-logo a { padding-top: 0; } .logo img { padding-top: 20px; } strong.second-logo a { padding-top: 10px; } @media only screen and (max-width: 768px) { .header-message { display: none!important; }} @media only screen and (max-width: 480px) { strong.second-logo { margin-right: 20%; }} @media only screen and (max-width: 768px) { .second-logo { display: none !important; }} .home .avia-builder-el-5 { margin-right: 8%; margin-top: 20px; } .home .avia-builder-el-4 { margin-left: 8%; margin-top: 20px; }
function second_logo($logo) { $logo .= '<strong class="second-logo logo bg-logo"><a href="http://www.nrto.nl/partnerorganisaties/kwaliteitslabels_en_keurmerken/geschillencommissie/"><img src="http://www.tophbo.org/wp-content/uploads/2015/04/NRTO-logo-2.jpg"></a></strong>'; return $logo; } add_filter('avf_logo_final_output', 'second_logo'); function my_home_category( $query ) { if ( $query->is_home() && $query->is_main_query() ) { $query->set( 'cat', '17'); } } add_action( 'pre_get_posts', 'my_home_category' ); add_action('ava_main_header', 'ava_main_header_mod'); function ava_main_header_mod() { $output = '<div class="header-message">'; $output .= '<span class="blue bold">Kom naar een informatieochtend!</span> <br>'; $output .= '<a href="http://www.tophbo.org/informatieochtend/" class="orange bold">Loop even binnen of meld je hier aan!</a>'; $output .= '</div>'; echo $output; } function custom_widget_featured_image() { global $post; echo tribe_event_featured_image( $post->ID, 'thumbnail' ); } add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );
- This topic was modified 9 years, 7 months ago by erikvermeulen.
April 30, 2015 at 3:43 pm #437528Hi erikvermeulen!
1- Please add following code to Quick CSS
.header-message span.bold { color: #51b2ea; } .header-message a.bold { color: #fd8917; }
2- It would be possible that would require whole a lot a change in custom CSS code
Regards,
YigitMay 6, 2015 at 10:40 am #440219Thanks so much! This did it. Can I also make the text a bit bigger? Is there some CSS that would allow me to change the font size of just that header message?
May 6, 2015 at 4:20 pm #440430 -
AuthorPosts
- You must be logged in to reply to this topic.