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.
Related
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 have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
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 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/
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.