I am not a web developer so please bear with me on that.
I have a website (WordPress) that I'm trying to make a small update to before getting professional assistance. I have updated this page https://www.trustserve.net/legal-privacy/ which you will see has bullets and numbers. Originally when I input this text the bullets and numbers were appearing black. I updated the CSS code which I will include below that fixed that issue. The problem however is that my main menu at the top of each page now has a bullet next to it as well.
Main Menu:
I have seen numerous posts regarding bullets and WordPress sites but I can't connect the dots (no pun intended!) between those posts and my issue specifically.
I assume I need to add some HTML for the Main Menu specifically to remove the bullets but I don't know how to do that and this is what I need help with. Any assistance that will help me remove bullets in my main menu without impacting the bullets on the other page is greatly appreciated.
My CSS updates are as follows:
ol {color: white }
ol li::before {
color: white;
}
ul { list-style: none;} /* Remove default bullets */
ul li::before {
content: "\2023"; /* Unicode bullet symbol */
color: white; /* Bullet color */
padding-right: 10px;
}
Address only the lis in the (main) menu by using its ID in the selector and reset the content of the pseudo element you created:
#menu-main-menu li::before {
content: "";
}
...or content: none in that rule. The difference will be the horizontal spacing between the menu items - choose which one you prefer.
try to get rid of this using content: "\2023"; code if you have access to the wordpress css theme, or just override it with your own css file by letting the string empty, as follows
ul li::before {
content: "";
color: white;
font-weight: bold;
padding-right: 10px;
}
That should work, and never underestimate the help of the inspector of your web browser ;)
Related
I'm a newbie at CSS/HTML and I have a website assignment due in an hour's time and I can't seem to get the bullet points on my page to just be white (instead of the default black) without the alignment screwing up and appearing in places I don't want it to be like the navbar
Here's what is looks like normally
default bullet points
and here is the code normally
code for default bullet points
and here's what it looks like when I include this code (in the CSS) that I found on this Stack Overflow (Change bullets color of an HTML list without using span):
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: white;
font-size: 20px;
}
broken bullet points after copypasta from stack overflow
The problem with the code you copied and pasted is that it's modifying the position of the bullet with position: relative and the top and left properties. I'd recommend you used this code instead:
li::before {
content: "\2022";
color: white;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
Which doesn't modify the position of the bullet.
The code you copy-pasted is doing a lot of things that you probably don't yet understand.
list-style: none removes the default bullets completely.
li:before allows you to pretend there is another element inside the list item, before its content, and lets you style that pseudo-element.
So the code you copied is trying to manually create fake bullets instead of customizing the ones that already exist. This is what I'd call a CSS hack, it's not something you would do unless you're trying to achieve a very specific look that's impossible to get using normal means.
If all you're trying to do is replace the bullet icon, that can be done with the CSS property list-style-type.
I am trying to custom my bullets for a list inside a specific < div > tag.
For that I created a class associated with the < div > tag, and in my CSS stylesheet I asked for the bullets that I want inside lists within that tag.
However, the bullets do not appear the way I want them to. The code seems to work, because I can add other cutomisations within the CSS style (make the text of the list bigger for instance), and it works.
I am using Spip for my website; maybe some of you won't be familiar with it: in my website's backoffice, I created a input area named TAKE_WITH_YOU and that's where the list is. Spip converts the list into a valid HTML list (ul and li), but I cannot access this code directly.
Here is my HTML code:
However, despite those changes, the bullets don't change from their default style.
The code seems to work okay, because as I said before, I can change the font-size by changing the CSS, and if I put none in the ul list-style-type, the bullets do dissapear. However, any other value (disc, square, an image, a hex code) brings me back to my original bullets...
.take_it ul {
list-style-type: "\25A1";
/*
I have also tried with:
list-style-image: url(puce-blanche.gif);
And with
list-style-type: "□";
*/
}
.take_it li::before {
content: "\25A1";
/*Also tried with other values as above*/
position: absolute;
left: 0;
}
<BOUCLE_150(MOTS){titre=« 150. take_with_you »}>
#SET{ident_div,#TEXTE*}
#SET{title_div,#DESCRIPTIF}
</BOUCLE_150>
[(#TAKE_WITH_YOU*|oui)
<div id="#GET{ident_div}" class=« take_it »>
<h3>[(#GET{title_div}|textebrut)]</h3>
[(#TAKE_WITH_YOU*|cs_decoupe_compat|propre)]
</div>
]
What am I doing wrong?
Thank you.
You can use list-style:none to customize the list-style. By looking at your code, I assume you are trying to use :before pseudo class to display the custom list style.
ul {
list-style: none;
position: relative;
padding: 0;
margin:0;
}
li {
margin-left: 20px;
}
li:before {
content: "\25A1";
position: absolute;
left: 0;
}
<ul>
<li>Take this</li>
<li>Take this one too</li>
<li>Take this one last time</li>
</ul>
Something has changed with the latest browsers (Chrome, Safari, IE) and I can't figure out why things look broken now. The site I'm talking about is here (the "Writing" menu), and I wasn't able to build a minimized fiddle for this problem (sorry).
I have a standard CSS based menu, built from unordered nested lists which show/hide on mouse hover. For those submenus that have yet another menu, I use an automatically placed ">" character to indicate that. This is the code:
ul.menu li.arrow > a::after {
content: ">";
float: right;
padding-left: 1em;
}
So for those <li> elements that have another submenu (i.e. a nested <ul>) I want to automatically add the ">" right-aligned. This worked until recently. However, with some of the latest browser updates it seems that the ">" does not expand the width of the <ul> anymore but instead wraps around onto the next line.
I tried to somehow widen the <ul> (it's currently set to width:auto) but that didn't help; setting the <li> or the <a> inside the list item to white-space:nowrap didn't help either. However, I noticed that when I remove the float then all ">" are there, just not nicely aligned to the right side.
How can I fix this?
Try using :before instead of :after:
ul.menu li.arrow > a:before {
content: ">";
float: right;
padding-left: 1em;
}
The problem is that floating elements can only affect following elements, but not previous ones.
But if you want some separation between > and the text, use
ul.menu li.arrow:before {
content: ">";
float: right;
}
ul.menu li.arrow > a {
padding-right: 1em;
}
I have a CSS problem on this page: http://www.fastclickad.com/ask-for-your-free-seo-analysis/
For some reason, bullets still show although I inserted in the style sheet several instructions so the list styles don't inherit from the theme.
When I "inspect element" with google Chrome everything seems to go smooth, except the bullets still show!
Can you help me?
You have a border specified which, if removed, prevents the arrow:
.aritclecontent ul li::before, .sidebarwidget ul li::before {
border-left: solid #0473B2;
}
So you'll need to do something like:
.gform_body ul li:before {
border-left:none!important;
}
The !important could be frowned upon, so you might wish to analyse your styles and refactor accordingly to remove the need for using it, if indeed it is necessary.
try this ..
list-style-type: none;
Hey guys I'm trying to create a horizontal navigation on the footer of a WordPress theme and was encountering several issues. I tried initially doing it as a display:inline which got it to be horizontal, but i want every element of the list to have a bullet point except for the first element. So I did a little research and came up with the following code
.menu-footer li{
list-style-type:none;
float:left;
margin-right:5px;
margin-left:5px;
}
.menu-footer li:before {
content:'\2022';
}
.menu-footer #menu-footer-navigation li:first-child {
list-style-type:none !important;
}
However the first-child isn't working as I feel like it should be. I've tried moving elements around and such and it hasn't worked. The list is being created dynamically through the WordPress backend and no matter what I try it's not doing what I want it to do, that's why I chose to come this way and ask for some help. Most the solutions that I have found come from this site, and haven't found one that works for my situation. You can see the site at http://goml.xxplosions.com if you are looking for a reference point.
Your second rule creates a pseudo-element containing your bullet point in front of every list item. To remove it from the first element you need to overwrite that exact rule:
.menu-footer li:first-child:before {
content: none;
}
Read more about pseudo elements:
https://developer.mozilla.org/en/CSS/Pseudo-elements
https://developer.mozilla.org/en/CSS/:before
Try adding this to the bottom.
.menu-footer li:first-child:before {
content:'';
}