I'm using Wordpress>Atahualpa Theme>Recent Posts Widget Extended on my site toawaken.org.
Recent Posts are listed in the r.h. sidebar. I have added a "bullet" (disc) in front of each Post title. When I did so, it threw the spacing off.
If you link to my site, you will see for some reason the added bullet is forcing the text to appear one line below the bullet, instead of right next to it, on the same line as the bullet, as it should. I want the post's title to line up on the same line as the bullet, not one line below it. I tried adjusting margins/padding in the CSS editor, but no margin/padding combination changed this. Nor did changing the div list-style-position from inside to outside:
div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}
If anyone could please check the sidebar on my site and offer a remedy, would be much appreciated.
This plugin seems to have a clearfix implemented in the <li> elements, and it's pushing headers to the next line. You can override it with this CSS:
.rpwe-clearfix:before, .rpwe-clearfix:after {
content: none;
}
As a side note, try not to use so much !important expression in your stylesheets. You'll end up having more and more difficulties changing the CSS rules. If you want to everride certain rule, you use a selector with just a bit stronger specificity than the one you want to change.
You can read more about selectors' specificity here.
Related
We are using twenty sixteen word press theme.
The theme has lot of header and footer spaces which would like to remove.
Eventhough we didn't provide any banner or any other images it still have more spaces before the table gets generated in the page or page content
any suggestion on how or where to fix this?
Thanks.
You can just right click on the empty space annoying you and click inspect in chrome. It will show you something like this...
Here... Faint Green outline is the padding... this is causing that annoying whitespace,
.site-header {
padding: 5.25em 4.5455%;
}
Just kill it with CSS, you need higher specificity ( Learn more here https://developer.mozilla.org/en/docs/Web/CSS/Specificity ) for beginners simply prefix body before selector and it will have higher specificity and will work like a charm...
body .site-header {
padding: 0;
}
You can also use !important...
.site-header {
padding: 0 !important;
}
Using !important is not a good practice coz it breaks the heirarchy but since you are designing the site not writing a plugin it's up to you ;)
You can use this for any element, try yourself for footer 😉
You can add the CSS by using a plugin like https://wordpress.org/plugins/simple-custom-css/
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
My site's menu is a list created by ul/li syntax. I have already deleted all CSS lines about the menu list but it still look like this, which the bulletin dots show up weirdly on the last character of the menu item text. I'm getting crazy to deal with this.
Why is this happening in IE/Google Chrome?
edit:
Thanks for your help. but after the reset, the list is not aligned vertically. It looks like this, and if i add list-style-type:none to the li element again, the dots just appear again.
You need to override the user agent styles. To remove the dot, override the list-style-type
ul {
list-style-type: none;
}
Use Reset.css to neutralize all cross-browser differences, however the problem you're describing in Chrome is probably; be caused by your -webkit-padding-start property.
Try to use a CSS Reset, it will override the default styles.
e.g. of reset is given at this page http://meyerweb.com/eric/tools/css/reset/
I have a tab system built in css using unordered lists and list items. I would like to embed a second tab structure using the same visual style within my content region. I was able to do that and everything functioned, but there is an appearance issue. Within my content region I have a different set up ul definitions. I would essentially like to tell one div to follow half of the instructions defined in the content region. The spacing and that type of formatting is needed, but I would like the ul stuff ignored.
If anyone has experience in this, I will gladly supply any needed code. I didn't want to post a bunch of stuff that didn't assist in solving the problem though.
Thanks for your help
You need to specifically target the lis and uls only in your content and override values you dont want or change.
If your content is in a wrapper called #content, and the tabs are called .tabs then do
#content .tabs {
background-image:none;
margin:0px;
}
and so on, setting the values you need.
How are the tabs styled? Use the exact same selectors but put a selector in front of them, like the content wrapper so you can target them specifically.
Hard to give you an exact answer without any code.
Apply an "un-reset" CSS block to your content region.
See: https://github.com/jbcrawford/Un-ResetStylesheet
or: http://noscope.com/vanilla-css
I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}