I'm trying to change the colour or remove the word Entry(header) in the top left of my bigcartel http://pafclub.bigcartel.com/entry so the page is completely white. i want it to effect just this page without changing colours for other things on the other pages which is what happens when you use the default header colour changer.
The <body> tag gets a unique ID attribute for every page, so to target the page title (and hide it) only on your Entry page you can add a bit of CSS. Head to Customize Design > Advanced > CSS and add this code in at the very bottom:
#entry h1 { display: none }
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'm trying to make a dark theme via css for Tiktok's Chrome site and I'm having some trouble making the like button visable on the black background.
i tried using Filter:invert(1); and that worked but when you like the comment the red color is now teal.
tiktok doesn't use different divs for the different imgs so when i filter the black heart it filters the red one too. all tiktok does is switch the image links in the src. i want to specify the black img link in css to isolate it so i can filter that one and that one only.
This is the HTML of the red like button.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg" class="jsx-1998704864 icon">
This is the one i want to isolate in css.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg" class="jsx-1998704864 icon">
This is what i have in my css
.like-container.jsx-1998704864 .icon.jsx-1998704864{
filter:invert(1);
}
Since you're not able to use JavaScript, your best option is to use attribute selectors. Please note that the source is probably very likely to change, since those classnames for example seem to be auto generated by some compiler. Same goes for the image URL.
To select the unlike button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg"] {
/* your unlike button style */
}
For the like button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg"] {
/* your unlike button style */
}
EDIT (after 15 mins):
If you want to select any image tag which contains the word "unlike" you can also use this:
img[src*="unlike"] {
/* your unlike button style */
}
Does anyone know what css and html code I can use that will set the focus on the nav bar. In other words I want the page tab such as home page to be highlighted when the user is on the home page. If the user go's to the contact page then the contact page nav bar tab should be highlighted.
You can do this in HTML/CCS providing your pages have classes or ID's. Using the home example:
HTML
<body class="home">...
<li class="home>...</li><li class="other>...</li>
CSS
.home li.home { ... }
.other li.other { ... }
This won't set the :focus but it will give you the visual effect you desire.
You can use some sort of class for your links. An example is to have an active class which has some outline effect on it or has a different background-color. But you cannot achieve that by just using HTML/CSS, you will need some javascript to add and remove this class, based on where you are on your page.
Hope this helps!
I am currently building a website and as soon as I added a link <a> tag to a <p> word, it becomes transparent. There are two links on the main page, both are coded exactly the same, but one of the links is transparent? The html passes validation and so does the css. If I add the old school <font color> html property within the <a> the color shows up, but the words break apart on different lines. I know this way is obsolete, but no CSS is working right now? Help?
Make sure that the background color is not the same as the hyperlink colors.
For kicks, try this: <font face="verdana" color="green">[your-entire-hyperlink-code]</font>
That's not how it should be done, but just to test it. If you see text, then your background color and hyperlink color are the same and need to be changed.
Try adding a CSS selector for <a> tags within <p> tags. Something like the following:
p a {
color: #000;
}
p a:hover {
color: #1c1c1c;
}
This should make any <a> black by default, and a dark grey on hover. If this doesn't work, try disabling all styles save for the default browser style-sheet (like Hakre said).
I have a div tag in my modal dialog built using JQuery like this: div id="dialogxxxx" title="xxxxx" . I want to just change the font and background color of the title alone, i.e. only the place where the title is displayed. Right now it has a default color and font. I want to change it to a specific color, but do not want to change the background color and font of the entire div, just the place where the title is displayed. Is there a way to do this? I tried adding style tag to the div, but that changes the background color of the entire div, not the title alone. I also tried doing div#title, that didnt help either.
Any pointer/help is greatly appreciated.
Thanks,
Asha
If you want a quick-n-dirty way, you can simply override the .ui-widget-header css rule, e.g.
.ui-widget-header {
background: red;
}
See this in action: http://jsfiddle.net/william/NgVAu/.
If you want a more maintainable approach, you should use the ThemeRoller, configuring the "Header/Toolbar" section. If you open up your css file, you can find a URL to the ThemeRoller with the theme it's using. It is located in the second lot of comment, after "To view and modify this theme", e.g.
/*
* jQuery UI CSS Framework #VERSION
*
* ...
* http://docs.jquery.com/UI/Theming/API
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/?...
*/