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

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!

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

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.

<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

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.