WordPress Theme modification to swap logos in header - css

On this site: http://new.thebeatfitness.net/ I'm using a child theme of this theme: https://organicthemes.com/demo/startup/ In the theme it has two headers built in, one for light backgrounds and one for dark. The theme has the navigation swapping light and dark but not the logo. Seems stupid but when I asked the theme developers they said it was built that way.
Can anyone guide me as to how to have the theme also swap logos based on background in addition to text nav?

Basically speaking, your theme toggles a class when you scroll.
This:
<div id="nav-bar" class="dark">
Becomes this:
<div id="nav-bar" class="light">
Your logo is loaded through an img element in html. The easiest option at your disposal is instead to load the logo via css.
.dark .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_dark.png'); }
.light .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_light.png'); }
The original theme you're modifying is actually using one image for both cases. Instead they change the text color, which is easier.

Related

How can I specify an umbrella class for all classes in a CSS file?

Apologies for the imprecise title, but I'm not sure exactly what words to use to ask my question.
I'm trying to add a toggle on a React app to allow multiple themes (dark mode, light mode). After a bit of googling it looks like the best way will be to have two complementary themes loaded from the CSS. For example, we could have:
<div class="a-nice-class">
...some nice sunny content
</div>
<div class="night a-nice-class">
...some lovely night-time content
</div>
with a css for night mode that looked something like
.night h1, .night h2, .night div, .night textarea{
background-color: black;
color: white;
transition: background-color 0.3s, color 0.3s;
}
I would like to use Bootswatch CSS themes for my night and day modes. The Bootswatch themes can either be imported using import "bootswatch/dist/flatly/bootstrap.min.css";, or by downloading and including the CSS.
I would like to download the CSS for each theme and then rename classes in the Darkly css to make any divs tagged with "night" read their formatting from Darkly, rather than the Flatly theme.
Without going into the CSS file and adding .night to all of the class names, is there a way of specifying that everything in the Darkly.css file should also be a .night class?
Alternatively if there's an easy way to toggle night mode for externally grabbed bootswatch themes, shout: I haven't found a satisfactory one.
Thank you 😊

Menu Background Colour Wordpress for homepage only

I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.

Custom CSS showing up in inspect element but not on page?

I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!

How can I change the colors (dropdown arrows, dropdown menus, etc.) of the main navigation bar of the WooThemes Resort Theme?

I seem to find the right code in layout.css, but when I add that to the style.css and change the colors nothing seems to happen, even after clearing cache. What is the recommended way to change the main nav bar colors for the Resort Theme? http://www.notketchup.com Thanks!!
Your WordPress theme's style.css needs a higher priority than the layout.css stylesheet.
In your theme's header.php, try moving the link to your style.css document to the line immediately before </head>
Failing that, try adding !important to your styles - e.g.
#myelement {
color: #888 !important;
}

Adding <a> tags to wordpress theme

I'm trying to customize my disqus link colors which as you may know, inherit the link color from the wordpress theme. The problem is my current theme I think hasnt specified any main color so disqus inherit the default blue link color for all the links. This is my stylesheet: http://goo.gl/p8cA9
Could anyone tell me how I could specify a link color in the style sheet? I'm just beginning to learn css and when I add the a {color:purple;text-decoration:none} class it deforms the rest of the sites style.
Thank you
You need to be specific, look in the source code of your WP webpage (if you use chrome press f12 and then go to the elements tab, press the magnifying glass and select the A tag you want to style on the webpage).
With:
a {
color:purple;
text-decoration: none;
}
You are saying that all the a tags should be this color. You need to look where the a is located.
Example:
<div class="content">
<p class="scribble">
Lorem ipsum google
</p>
</div>
In the example above the way I would style this a tag would be.
p.scribble a {
color:purple;
text-decoration: none;
}
The "."-in the CSS selector refers to a class. So I am saying I want a tag in the p with class "scribble". Good luck with your adventures.
PS. If you are using chrome and you selected your element successfully you can also see the CSS selector it is responding to now (right window).

Resources