Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

  • Author
    Posts
  • #114218

    ragnartorfi
    Participant

    Dear sir/madam,
    I have just entered the world of theme X and am loving it.
    I have looked around in the knowledge base but have not (yet) found exactly what I am looking for.
    Here is the current site (the english version, you’re looking at a particular category called “Calendar”)
    http://annit.is/en/calendar/

    As you can see, I have already added stuff to the custom CSS to hide some category archive content text:

    .category .x-header-landmark {
    display: none;
    }
    

    Also, I have added the following stuff to the custom CSS to try to get an image up in the header section:

    .x-header-landmark {
    margin: 0px auto 0;
    height: 100%;
    background-color: #0D0D0D;
    background-image: url('http://annit.is/images/bordi/10.jpg'); 
    }

    To see an example of what exactly this custom CSS stuff does, you can click here:
    http://annit.is/en/?s=fulbright&lang=en
    The image projects nicely but not in the correct place

    I would like the image to appear above, more specifically in the header region where the “ANNIT.IS” title is and the menu navigation (+ search) links are located. The “ANNIT.IS” title I would like to remove altogether, the navigation menu links should be in the same spot (I will make them red or something so they won’t disappear on top of the image). Furthermore, if possible, I would actually like it if the image could be randomly chosen from a directory.

    I would be most grateful if you could give me some pointers as it seems I have not figured out how to search properly for a solution, I’m still guessing that I need to go for some kind of child theme :o)

    Many thanks,
    Ragnar

    #114351

    Rad
    Moderator

    Hi there,

    Thanks for posting in.

    Not sure if I understand it correctly, please correct me. You’re trying to move the background image to your navigation bar?

    In that case, you don’t need this css

    .x-header-landmark {
    margin: 0px auto 0;
    height: 100%;
    background-color: #0D0D0D;
    background-image: url('http://annit.is/images/bordi/10.jpg'); 
    }

    What you need is this

    .x-navbar {
    background-color: #0D0D0D;
    background-image: url('http://annit.is/images/bordi/10.jpg'); 
    }

    Then hide ANNIT.IS with this.

    .x-brand {
    display: none;
    }

    Random image is not possible with css, but could be with javascript. But, I’d like to confirm first if we’re on the right direction.

    Thanks!

    #114521

    ragnartorfi
    Participant

    Hi there, first of all, many thanks for your quick and excellent response.
    This seems to work fine, example:
    http://www.annit.is/en/calendar
    The “ANNIT.IS” text is still there despite the .x-brand being in place in the custom css
    Thoughts? 🙂

    Regarding the random, I have an idea which I have to look at, I’ll write more here when I have more info
    Best,
    Ragnar

    #114553

    Christian
    Moderator

    Hey there,

    Please try the CSS

    .x-navbar .x-brand {
    display: none;
    }

    Please see http://prntscr.com/4re45i. As you see in the screenshot, using “.x-brand” alone won’t work because of the selector “.x-navbar .x-brand”. The more targeted a selector is, it has more weight in CSS.

    Thanks.

    #114588

    ragnartorfi
    Participant

    Excellent – Many thanks.
    Just one final note, regarding having the image in the navbar chosen randomly from a predefined set of images in a specific folder.
    Previously, using a completely different theme, the following would be put in place in a “header” file:

    <a href="http://annit.is">
    <img src="http://annit.is/images/bordi/<?php echo(rand(1,61)); ?>.jpg" width="100%" alt="" />
    </a>

    This would choose one (of 61 possible jpgs stored in the folder) image and put that as the header image.
    Is there any quick work around to make this happen?

    Again, very happy for any advice you may have but I understand you may not be able to solve everything for me :o)
    Best,
    Ragnar

    #114638

    Zeshan
    Member

    Hi Ragner,

    Thank you for writing in!

    Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

    After that, copy the file wp-content/themes/x/framework/views/global/_brand.php in your child theme’s folder /framework/views/global/, open the copied file in a text editor and replace the following line of code (probably line no. 19):

    <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
    

    With:

    <img src="http://annit.is/images/bordi/<?php echo(rand(1,61)); ?>.jpg" alt="<?php echo $site_description; ?>">
    

    Hope this helps. 🙂

    Thank you.

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex