I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.
Related
I am facing header media issues. I don't want that header area on my top of the website. I tried CSS code
.home #wp-custom-header {
display: none;"
}
but it's not working. please check my site for more details hindizone.in
It would be a better solution to change your theme template file so there is no such div container to be hidden. This can normally be found in header.php file of your theme. Delete the div with the class header-bottom.
Another way would be using CSS as you already tried. But you do not have an element with id wp-custom-header so this code is doing nothing. You can find out the right element to target with using the inspector of your browser.
I did this with your code and therefore found the classes you need to address in your css file.
Add following code to your custom css in the theme editor, or inside style.css of your theme:
#site-header.top-header .header-bottom {
display: none !important;
}
With the !important statement you make sure, that the display value is not being overwritten somewhere else in your stylesheet.
#site-header {
display: none;
}
...should work for your site.
I'm working on a client's website using the Wordpress Divi theme https://www.nationwidescents.com/ I didn't use it but I've ran into a few troubles customizing things that disagree with this theme (has anyone else had that issue?)
So in the footer on the bottom right, I'm trying to add the mailchimp signup box. It's there now but I want the width to be wider (100%). I've tried in-line css on the embed code and also trying these class tags with the width CSS in the additional CSS:
.input#mce-EMAIL.email
#mce-EMAIL.email
.email
#mce-EMAIL
.mc_embed_signup_scroll
Still haven't cracked it. any suggestions?
Could you please try:
#mc_embed_signup input#mce-EMAIL {
width: 100%;
}
The thing with your selector is that they all match, BUT there is already a selector with a "width: 50%" attribute: #mc_embed_signup input.email
This selector overrides your selectors and therefore the 50% remained. You could use this calculator to check or read up on CSS specificity.
Hope this helps!
I have wordpress site with some layout.
I need to change some css there, but got troubles overriding it.
Via webbrowser my CSS looks like:
It is places (genetated?) somewhere in theme.
Every time I refresh page I got different 'class-xyz' (on the screen it is: class-GkgfbCohxE) name in #inbound-list
I have added to custom CSS below (changed color):
But this is not loaded.
All structure of this CSS:
Do you know how to enable ovverriding this element?
It depends on the theme and plugin you use.
For my experience, this dynamic inline CSS may come from the page builder you use. If it comes from page builder, please check your page builder and adjust the style.
If you want to overwrite the css, you could simply put !important after the color attributes.
To override this css you need to use any parent id like below or you can apply some id to your body tag and write ur css with its reference
see my ex below
#parent #one li{
color: blue;
}
#one.asd li{
color: red;
}
<div id="parent">
<ul id="one" class="asd">
<li>aaa</li>
<li>bb</li>
<li>adfdf</li>
</ul>
</div>
If it's a your theme styles, you can create a child-theme, then overwrite the styles. You can also use the same selector in the child-theme css, WordPress knows that it has to take the ones from the child-theme.
How do I control the width or responsive width of the CODE tag in a Wordpress post?
Under the comments section on this post, the text, "You may use these HTML tags and attributes:" and the code elements after it, doesn't fit the width of the container of this responsive website design.
This line of code examples simply extends out past the container it's in. Here's the post I'm working on:
http://www.flippinlaw.com/what-is-sound-financial-advice.html
I've noticed the issue in 3 different browsers and it seems to be a bootstrap related style. Any help is appreciated greatly. Thanks!
Please remove white-space: nowrap; from code on bootstrap.css line #983
It is safe to disable your code { display: block; } too
Adding display:block to the code tag looks to work for me
code {
display: block;
}
Add it to your style.css file
edit
Note that will change it for every code tag on the site, so in case you don't want to do that you can either add it inline to that particular code tag (which isn't really the best idea):
<code style="display:block;"></code>
Or create a class for it:
code.code-block {
display: block;
}
<code class="code-block"></code>
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.