My CSS looks like:
.small, small:hover { color: #000000; }
My HTML looks like:
<small>Small Text</small>
<small>Small Text Link</small>
I'm trying to style the link in small i know its probably a simple problem but it colors the whole text and not just the link. Can anyone point me in right direction?
I'm using bootstrap so i don't want to change the color of a on its own.
You can specify that css rules for small element should be applied only if it is inside link (a element):
a small, a small:hover { color: #000000; }
By the way, there is no point in providing the same rules for a small and a small:hover, just a small should be enough.
Related
I am new to CSS and have an issue on my current project. I am sure there is a simple solution and it would be great to get some ideas to solve the problem.
I designed a Website with a navigation on top by using CSS. The different sites in the navigation have the same structure centrally "steered" by the CSS code. The only difference is the background-image per site which I changed by the body class:
body.Site1 {
background-image: url(Picturewithdarkbackground.jpg);
}
body.Site2 {
background-image: url(Picturewithwhitebackground.jpg);
}
Problem: The navigation text color in the header for one specific html site (with dark background) can hardly be seen due to the black text. My intention is to change the black text color in the Navigation only for this one specific Html site to white text color.
I have tried to change the header color but it is not working, it should only change it for the site with the black background (Site1) see below ->
body.header.Site1 {
color: white;
}
header.Site1 {
color: white;
}
How can I change the text color in the Navigation header for one specific html site?
Any simple Idea?
Thanks for support!!!
You seem to have added the "Site1 / Site2" class to the body.
So to change the header color for the specific site your CSS will have to look something like this:
body.Site1 header {
color: white;
}
Also, .header or header? Is it a class or a tag?
You have your order mixed up in your css. The Site1 should go before the header and after the body
Amend it to body.Site1 header{color:white;} (leave a gap between Site1 and header as header is a standalone tag, not a class belonging to Site1). Then it should work.
Good luck!
p.s. a footnote, if you can avoid using a picture as a background (i.e. if it's just one plain dark colour, not an image), then you'd be better off finding out what that colour is and using the appropriate hex code. It would save on loading time. Just a tip!
I have used css to indent every parapgraph in wordpress by 30px. This was going great until I noticed that it also indented my centered aligned text by 30px. That makes this centered text off centered. It's even more noticible when I look at it on mobile and I want the text to be easy and professional to read on the go. So, I want to exclude "text-align:center;" from the 30px indents for every center aligned text.
I don't have access to the entire code of my theme with my wordpress premium account. I can only edit the css using a blank css editor in a menu option. Is this possible without being able to see the whole code?
I have tried looking this up on stackoverflow before posting and using this code...
#article p {
display: block;
text-align:center;
text-indent:0!important;
}
I now know that this "#workskin p.chapter" ID selector will not work because I have not added it to my code because I do not have access to the full themes code.
This is the css code that I am using to make the indents and the only code that I have in my css editor for wordpress "p" paragraph element...
article p {
text-indent: 30px;
}
I could not get any changes in making my indents disappear for the text that was center aligned.
I'd like to make my center aligned text centered with my site and not indented an extra 30px from the center. For example:
Title-centered with no indents
Paragraph one-indented
Paragraph two-indented
Break in paragraph-centered no indents
Paragraph three-indented
Paragraph four-indented
Break in paragraph-centered with no indents...etc
This is the first time I am using css. Usually I have a full theme to look at the code and I am able to make small edits using color# and changing the src of images but that is the extent of my coding knowledge and I'm learning a little more with each google search and comment. This is the last code edit I need on my site and I appreciate everyones comments and help.
The specificity in CSS is in the order of
Type selector(h1, p ,div...) < Class selector(rules with a period .) < ID selector(rules with #) but the rules defined with ! important overrides any other declaration ofcourse ;)
As discussed above if different set of rules are added for a same element i.e rules targeting elements with same specificity then the CSS will use the rules defined later on (i.e the latest one)
Example:
p{
color : red ;
}
p{
color : green ;
}
In this example the color of the text in paragraphs will be green and not red as rule with green color is defined after the red one.
p{
color : red ! important;
}
p{
color : green ;
}
But here because of ! importantis added to red the color of text inside the p will be red.
So in your case you can go with either defining the text-align: center ! important or just define the rules overiding the ones you don't want in the specific p tag but this can be done by defining it's specific CSS rules after the rules for normal p tags
first define the normal or default rules as
article p {
text-indent: 30px;
}
After this add the specific rules
#worskin p .chapter {
display: block;
text-align:center;
text-indent:0;
}
Thanks AuxTaco for your suggestion.
you can put class on the p that you want to exclude from it like:
article p {
text-indent: 30px;
}
// try changing it to this remember exclude is class on p tags you want to exclude
// Dont forget the dot (.) before exclude
// and the !important is after the value
article .exclude {
text-indent: 10px !important; // you put !important here
color: red !important; // like this
padding: 10px !important; // like this
}
MAKE SURE TO MAKE EXCLUDED P UNDER THE NONE EXCLUDED TO REWRITE IT
LOOK AT CODE COMMENTS CAREFULLY
Hope it was hepfull
I've made a sign up form with a submit button at the bottom. When deploying the code on the website, the button appears to have an unwanted grey background colour but only in a WordPress article. When tested outside WordPress, it appears fine. It seems WordPress changes it for some reason. Does anyone know why this might be?
This looks like an issue with specificity. In CSS, if you have not given style to your button element, it will inherit the style of the parent element. For example: If your "article" class contains a style for button elements...
.myArticle button {
background-color: #232323;
color: black;
}
Your button in that article, if not given its own id/class will receive that style. To change this, simply give your button its own id/class.
For example:
#myButton {
background-color: "color";
color: "color";
}
Furthermore, looking at the image you linked to. The reason the two buttons are styled differently may be to do with the input type. In CSS you can also select inputs by attribute. Example:
.myArticle input[type=submit] {
background-color: #232323;
color: black;
}
Either way, I would just consider giving the button you're having trouble with, an ID. From there you should be able to manually style it. ID's are one of the most specific selectors, no styles should overwrite that. Hopefully I've understood your question correctly, and this helps.
I have literally no html/css experience and hence I solicit your help with the following.
I am using a shiny dashboard with a default sidebar. I tried to change the background color and the font color of the sidebar using the following line of code inside the dashboardBody:
tags$head(tags$style(HTML('.skin-black .main-sidebar {color: #000000; background-color: #FFB6C1;}')))
What happened was that the new sidebar has a background color of #FFB6C1, which I intended to. But the font color in the sidebar didn't change into black and it is still white! Any suggestion?
Thanks a lot
San
I came across an example that helped me solving the issue. http://journocode.com/2016/04/04/r-first-web-application-shiny/
Accordingly, the problem was solved by used:
label = HTML('<p style="color:black;">Maximum number of suggestions</p>')
in order to depict the color of the label in black instead of white color obtained when using only:
label = "Maximum number of suggestions"
Of course both were arguments of the selectInput object.
Thanks KH for the help and of course thanks MARIE-LOUISE TIMCKE for your amazing post.
Ciao
Your CSS selector may not be targeting text elements, rather a sidebar div. Assuming your text elements are under the .main-sidebar class, this should/may work. Just replace ELEMENT with whatever HTML tag your text is enclused in, like
.skin-black .main-sidebar ELEMENT {
color: #000000;
.skin-black .main-sidebar {
background-color: #FFB6C1;
}
Whitespace does not matter.
Similar to #Kasper's answer, but to directly embed into shiny code:
dashboardBody(
tags$head(
#in line styling
tags$style(HTML(
#siderbar background
'.skin-blue .main-sidebar {
background-color: white;}',
#siderbar text color
'.skin-blue .main-sidebar .sidebar{
color: #red;}'
)
)
)
Note that
although it changes the style of sidebar, the code is within dashboardBody().
depending on your current dashboard skin color, you need to change the ".skin-blue" (blue is default) to e.g. ".skin-black" as needed
for changing font color, it is essential to have ".sidebar" after ".main-sidebar". ".sidebar" basically is the ELEMENT mentioned by #Kasper. (To locate such elements, use Developer tools in your chrome browser, and inspect everything until you can locate the precise block of html code, and use the ELEMENTs after "class=" for this purpose.)
I'd like to know how to do something like this in CSS:
How is it possible to change the text color halfway through like that on an <input> tag ? I've done a View Source already, but it's hard to make sense of.
Google uses two divs which are absolutely positioned on top of the input box. The first div contains the word stackoverflow, and the text is styled in a light gray. The second dvi contains "stacko" and the text is black.
If you inspect the source, look for divs with class="gsfi".
First off, look into implementing autocompletion. This should give you another element [beneath the one the user types; probably another div] for styling.
its not purely a CSS thing, you need JS too.
Have a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Now you could use CSS for styling text selections in that input to gray the text out.
like this:
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}