• Resolved harkale

    (@harkale)


    Hi!

    I’ve recently created my WordPress website, using the Illustratr template, and I tried to switch the colour theme (dark background and white text instead of the opposite) in order to make the pictures stand out.

    This forum was a huge help (thank you!), but I still struggle with two things: the background colour of my slideshow (Jetpack + Illustratr), which remains desperately white, and the dark page titles (for instance, here).

    Is there a way to change their colours? Turn the slideshow background to black, and adjust the colour of page titles to a lighter shade of grey? I know that some other elements can’t be modified, due to the limitations of the free Illustratr theme (like the colour of links or that of the hover box over a portfolio), but I really hope these things can be changed…

    Thank you very much!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter harkale

    (@harkale)

    I figured out a way to remove the white slideshow background: not using the “fade” transition between pictures. I don’t know why, but it works ??

    Now the only issue I have left is these dark page titles…

    You can change the color of the page titles using this CSS in Appearance->Customize->Additional CSS

    .site-content .page-header h1.page-title {
    	color: white;
    }

    I know that some other elements can’t be modified, due to the limitations of the free Illustratr theme (like the colour of links or that of the hover box over a portfolio)

    This can most likely be modified actually to your liking with some CSS like the CSS I provided above. Though I’m not quite sure of what you’re talking about when referencing those specific elements. If you can provide more data on what you’re wanting to change, I can try to get the CSS to allow you to change it.

    Thread Starter harkale

    (@harkale)

    Thank you very much for your answer! It seems the previous CSS code I had only changed the colour of non-portfolio pages, so yours worked much better. I’ve also added the following line:

    h1.entry-title {
    color: #cccccc;
    }

    to change the colour of portfolio entries titles to light grey.

    What I mean with link and hover colour is visible on this page. As you can see, the link to my gallery is red. I tried adding a custom CSS code I found online to turn them white, but it had a weird effect: the first time I opened the website, the links appeared in white, but later they went back to red. Then I saw this thread on wordpress.com, and assumed it meant I couldn’t change the colours of links in Illustratr. I would love to be wrong, though!

    The red hover boxes are visible on the same portfolio page I linked before. When you put your cursor on a specific portfolio, it creates a red square, which I would like to change for something less intrusive — like an overall “lighten the image” effect (akin to a photoshop “linear dodge” layer), which I’ve seen on other websites, or if that’s not possible, a semi-opaque white box… Unfortunately, I couldn’t find anything that worked for me online (maybe due to my poor choice of words, since these things may not actually be called “hover boxes”…)

    And if you don’t mind me bothering you with an other one of my problems, there’s an other element of my website which remains red: the navigation menu and down arrow of the mobile/tablet version. Is there a way to change their colour to white?

    Again, thank you very much for your help!

    Hmm I think the following may be what you’re looking for

    .page-content p a {
    	color: white;
    }
    
    .portfolio-wrapper .portfolio-thumbnail a:before {
    	background-color: rgba(255, 255, 255, .4);
    }
    
    @media screen and (max-width: 600px) {
    	.main-navigation.toggled .menu-toggle, .main-navigation .menu-wrapper li .genericon-collapse {
    		background-color: white;
    		color: black;
    	}
    }
    Thread Starter harkale

    (@harkale)

    Thank you so much, that fixed everything!
    I only changed “.page-content” to “.site-content” to modify the link colour site-wide (lucky guess).

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change colours of slideshow background and page title’ is closed to new replies.