[ragnartorfiParticipant]

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

[RadModerator]

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!

[ragnartorfiParticipant]

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

[ChristianModerator]

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.

[ragnartorfiParticipant]

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

[ZeshanMember]

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.

[Author]

Posts