I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/
Related
I am trying to change the position of a side panel that comes up when an option is being hovered over. Here is the code from chrome developer tools:
<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
<ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
<li class= "nav_trigger nav_open">
<div class= "sub_panel" style= "left: 50px;"> == $0
</div>
</li>
</ul>
</nav>
I just need to change that style left : 50px to 76px. The developer tools just have this attribute saved under element.style which I can't really target in my CSS file. Any help is appreciated!
I have tried to target by being really specific and ended up targeting the main panel and not the sup panel. Here is the code that I tried:
nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{
left : 76px;
},
Your CSS selector should be as shown below (according to the HTML you posted). Look at every detail: I deleted all commas and a few spaces. If an element has more than one class, you address it like div.class1.class2 (no spaces, but with a dot between the class names). Commas are used to list separate selectors for the same rule, not to indicate child elements as you did. To select an element which has as ID, you directly attach the ID to the element (Not nav #side_nav, but nav#side_nav).
nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel {
left : 76px;
}
If necessary, add !important after 76px (but before the semicolon).
You can use the syntax !important so then it will override all other formating of the type that you use the !important on. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important
You can also use the span element in the HTML to make it even more specific with the CSS.
I'm working on a webpage and I have an issue, I've created a css function for my image
#my_linkedin {
background: url("../img/linkedin.png");
}
but my isssue is that when I'm calling the class in my HTML, the image doesn't appear.
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<a onclick="window.open(this.href,'_blank');return false;" class="my_linkedin" href="https://www.linkedin.com" target="_self"></a>
</div>
My file is called creative.css and I also have the same file but minified. The issue is that on the webpage, the css are coming from the minified file, so how can I import my css who's coming from the creative.cssplease ? Because I don't want to have to put it in the minified one.
Thanks.
In this case you can have 2 problems.
First - link just empty and it width and height are equals to 0. So you cant see you backdround.
Second - I can see that you are using #my_linkedin as a selector which means that you is searching by id, replace to .my_linkedin.
You want .my_linkedin { ... }. # is for writing styles to match elements with matching id="..." attributes. . is for classes.
Some errors here.
You are referring to a css rule, not function.
You are defining a css rule for a specific id, but on your html your element don't have an id, instead it have a class.
#someid {
color: red;
}
.someclass {
color: green
}
<p class="someid">BLACK</p>
<p class="someclass">GREEN</p>
<p id="someid">RED</p>
<p id="someclass">BLACK</p>
Your problem isn't related to whether or not the file is minified. Your selector applies to an element with id="my_linkedin, but your HTML doesn't have such an element. You can either change class="my_linkedin to id="my_linkedin" or you can change the CSS selector to read .my_linkedin
In CSS you don't call that a function. The #my_linked part is called a selector and the stuff inside the curly braces are called properties. Likewise, you can't call anything in CSS as you would in a programming language.
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.
I'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>
The parent element is <div class="tagcloud">
Normally, with the theme I'm using, I can add custom styles like this
.custom .tag-link-1- {font-size: 10px}
but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?
Not in a backwards compatible way, no.
CSS 3
a[class^='tag-link-'] {
font-size:10px;
}
I would define a numberless class to hold all the common style info.
.tag-link { font-size:10px; }
Then attach it to each element.
<a class="tag-link tag-link1">Link</a>
You have two options that will work well for you in this scenario.
Option 1: Use CSS Selectors
If your tags are wrapped within some kind of a div, such that:
<div id="tag-cloud">
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
.
.
.
</div>
Use this CSS:
#tag-cloud a { ... } /* Each tag will be styled */
Option 2: Use jQuery!
If you can't figure out option 1, you can always use jQuery to style the element:
$('a[class^="tag-link"]').css( ... );
Refer to this for documentation on how to use the CSS function in jQuery
Option 3: Modify the Wordpress Widget file
You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.
The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.
If all tags are getting the same style can you not do:
.tagcloud a {font-size: 10px}
If not please clarify your question.
Thanks!
edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');