Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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, 6 months ago by erikvermeulen.
    #437528

    Hi 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,
    Yigit

    #440219

    Thanks 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?

    #440430

    Hey!

    Please add following code to Quick CSS as well and adjust as needed

    .header-message { font-size: 16px; }

    Cheers!
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.