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.)
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
On our site http://reiner-lemoine-institut.de/ueber-uns/team/kathrin-goldammer/, whenever the window is minimized to a certain size, a blue block appears over part of the text.
I have added a screenshot that specifies the exact place within the code that seems to be affected. I am not an expert in CSS or HTML, so I am hestitant to change the code myself:
Apparently though, the problem appears when the div.column_attr = exactly 339.833 x 908. Anything below this size or above it is fine.
I had a play around with your CSS and think I found what your problem is.
.get_in_touch, .infobox {
background-color: #0f3b64;
}
if you remove/comment out this background-color your problem should be fixed.
This is caused by the following line:
.get_in_touch, .infobox {
background-color: #0f3b64;
}
Change to transparent should solve the problem:
.get_in_touch, .infobox {
background-color: transparent !important;
}
Your theme has a custom.css file to put your custom styles in it and is located at: css/custom.css so try to add the above code there.
I have a answer for your question. The following class has a background color in your css file. You can remove thet color if not required in the website.
.get_in_touch, .infobox{background-color: #0f3b64}
Or you can use where inline background image is define i.e in infobox
.infobox{background-size:cover;}
I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes
I use Wordpress and Shortcodes Ultimate, and I'm currently using a shortcode named "service". It displays a text, with a title and an icon.
My purpose is to change the background color and the text color when the mouse is over the service area. I analyzed the HTML code of my page and found that there were two DIV elements for the "service" shortcode : su-service-title, su-service-content.
So, in my CSS file I wrote :
.su-service-content:hover, .su-service-title:hover{
background-color: #2680BE;
color: white;
}
The background correctly displays in both title and content elements, but the white text only displays properly in the title : the content text color does not change. The style title used for the content text is h3.
Here is the page I'm working on :
http://www.cirnu.com/agence-web-corse/
Thank you for you help
In the css of your template there is already a general styling rule for the color of h3. You should rather specify your selector a bit more in order to overrride this:
.su-service-content:hover h3, .su-service-title:hover {
background-color: #2680BE;
color: white;
}
You could try to do it inline as well, just like regular html
<h3 style="color:white;">text</h3>
It works for other shortcodes, same plugin
I have edited my custom CSS to include ::selection{color: white; background: #2f3f58;} or multiple similar variations including copy/pasting and then editing code from W3Schools, W3C, stack overflow, and other sites. The code does nothing. I am using the http://alxmedia.se/themes/hueman/ Hueman theme and it has almost the exact same code that seemed to be working. So i copied this code into my custom CSS and edited it and that did not work either. Finally i disabled the theme CSS pertaining to selections. No matter what I do my selection color is the same red set in the theme options menu as a primary color. The hex for that red is not in the theme CSS however except in the commented out selection element that I am replacing. Is there any way to override the highlight color using CSS that is not the ::slection: element or am I using the element wrong?
the code is now
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
much thanks to #citizenen and is wonderful suggestion
That's the right element for selection color. You can use the "!important" property to raise the specificity and force the style over others. Also use "background-color" instead of just "background". Try changing it to this:
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
More on !important here: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
You are missing a closing brace in your CSS file (custom.css) that's preventing styles after that point from applying correctly. In the future, copy your code into a tool like Lint (http://csslint.net/) and it will find the errors for you.
Cheers!