Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Starting points:
Using bootstrap-sass (compass)
have the following html-markup (can't change it)
<div class="some">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
Is possible style the above (using the sass-bootstrap) as navbar without the "brand-logo" and without changing the html - e.g. semantically?
If you want only style, just use the wanted styles like:
.some {
#extend .navbar;
#extend .navbar-inverse;
}
.some {
ul {
#extend .nav;
#extend .navbar-nav;
#extend .navbar-right;
> li a.active {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
}
}
E.g. the above will style your div/ul to get an right aligned inverse navbar - all styling is like in the bootstrap.
I not tested the javascript - it will probably fail, because it will search for the navbar - but the above for the simple styling works.
For the li > a.active part: i just copied it directly from the bootstrap-sass, it is needed because the bootstrap uses the active for the li element and not for the a element, so you need exactly style the a.active.
Also, it didn't collapses into the button, but only changes its layout to vertical list.
The "brand" will be automatically excluded, because it isn't in the markup.
I think we would need to see more of the code but if memory serves you are using the standard Twitter Bootstrap menu. If so you 'could' style this using the class and display none the Brand-logo that is in the code. If you can remove the brand logo from the HTML it would be easier
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have a <div> element inside a <li> element (as shown in code snippet). The <li> element has cursor: pointer style property set and I can't remove the cursor pointer in that nested <div> element.
The <li> is not in our control to remove css, since it comes from a third party.
.container {
cursor: pointer
}
.local {
cursor: default !important
}
<ul>
<li class="container">
<div class="local"> Hello World </div>
</li>
</ul>
The .container class is actually irrelevant here. It just so happens that it has a cursor: pointer property which shows on, but the problem is in fact - What is overriding the .local classed <div> element from rendering the cursor: default property.
The best way to answer that would be to take a look at the elements and styles panels on your browsers developer tools and see what's doing that. It will let you know what's overriding it.
Then you can use adjustments, either by increasing specificity, or by changing the code that's overriding it. But the specificity needs to be relevant in comparison with the .local class and whatever is actually overriding it.
Edit: In the provided example, you don't need to worry about specificity because they're different classes. However, I frequently see !important being added to rules as a lazy way to override specificity issues that aren't replicated in the example. I assume that to be the case here as well since the OP notes that, "the container comes from a third party". So understanding specificity rules will help resolve the issue.
You could use !important but that should really be a last resort. However, you're much better served long term by increasing CSS Specificity.
Currently .container & .local have equal weight. You can increase specificity by: Using an ID, referencing more hierarchy, using combinators etc. Then the NEW attributes will override the previous attributes based on CSS order.
Eg:
.element {
background: blue;
}
.element {
background: red;
}
// produces a red element
So in this case you want to increase specificity. You can do that easily like this:
.container {
cursor: pointer;
}
.container > .local {
cursor: default;
}
// where local is a DIRECT child of .container
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to create a text like that:
My question is, how can I create it using CSS?
The closest solution I've found was unicode with circles:
①②③
Start by simply creating something like the HTML and CSS below:
HTML
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
CSS
li {
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
border: solid 1px #888;
line-height: 25px;
}
li a {
display: block;
}
See example here
To add the numbers with CSS before/after selectors-See this example.
In my opinion using a span is better than using a custom font because of two reasons
Support across all browsers - Many browsers don't support custom font
It is one extra resource download (font file) for the browser so it will affect performance and contribute to the overall page load time.
Of course you can always style each letter differently by assigning classes individually and applying some specificity but that could be more work than it's worth and very hard to maintain. I would recommend lettering.js and you can find it in Github for free download.
here are some links to get you started.
Ahandling Web Typograhy
Lettering.js
lettering.js download on GitHub
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am not able to delete the last part of the menu in Wordpress site of my client.
The original line of code is this:
ul # top-menu li {
padding-left: 19px;
background: url (images / menu-bg.png) no-repeat right 3px;
}
which CSS code should I use?
Its not smart to remove it like Fahad says, you can just remove the links in the menu.
Log in on the admin account of the site and go to:
From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
Select the menu where the link is in, and remove it from that list. Save it, and you're done...
This should work:
ul#top-menu li:last-child
{
background: none;
}
This will remove the background image from the last menu item (in your case it will remove the line on the right).
EDIT: As ninja has pointed out, using last-child won't work on some versions of IE, so this method should work if you want to support them:
ul#top-menu > li + li + li + li + li + li + li + li
{
background: none;
}
This will remove the background from the 8th menu item (each li is referring to a menu item), you will need to remember to update this is you add/remove an items from the menu.
Since you haven't included any proper code and the website link which you've included opens up a coming soon page, I am not quite sure what you're referring to but from what I understand, you'd like to remove the last <li> present inside your menu. If yes, you can do that by setting the display property of the last <li> to none using the last-child psuedo-selector like this:
ul#top-menu li:last-child {
display: none;
}
UPDATE:
Since you've clarified that you want to remove the background image from the last <li>, you may use this CSS:
ul#top-menu li:last-child {
background: none;
}
If you want a solution which would work for older versions of IE then what you can do is that you can define a class for the last menu item by logging into your Wordpress Dashboard, navigating to Appearance>Menus, clicking on the screen options button in the top-right corner and placing a check on CSS classes. Next, scroll down, click to open the last menu item and type the class-name inside the CSS Classes (optional) input field. After saving the menu, you can set the background to none for the last menu item by targeting the CSS class which you set for it, like this (I've assumed the class-name of the last menu item to be last-menu-item):
ul#top-menu li.last-menu-item {
background: none;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Two different paragraph can be given two different type of colours using the below css code.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
Now, In the html code i can Specify
<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>
The above CSS code can be modified to as Shown below, So which one should be used, considering best coding Technique(Design).
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
Classes can be duplicated which means a p tag and a div tag can have same class.
But if you want to style only the p tag then you should follow the second style. If you are not using your class anywhere else except for the p tag you can use the first style.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
will not be limited to p tags....it can be allocated to any tag having the class paraStyle1 or paraStyle2, it can be a,p or even a div... see demo here
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
is specifically for the p tags having classes paraStyle1 or paraStyle2....no other html tag can avail the style of these classes except p tags.... see demo here !!
The second syntax (p.paraStyle1) applies the contained css only to p tags with the paraStyle1 class. You should use this syntax if you are planning on reusing that class name with different styling for different tags.
When you specify your CSS selector to be p.<class>, it means that you only want the p tags with that class to be styled. However, if you need this same style to be applied to other tags as well (eg a <div> tag), then use the first method.