I am trying to write a rule to style a navigation item bold when the user is on the page it refers to. I don't have access to the HTML for that page. The rule I have written to get around that issue is:
html link[href="http://www.stuff.com/tagged/patterns"] + a[href="/patterns"] {
font-weight: bold; }
This does not work. Neither does it work using a * instead of the HTML or taking it away altogether, using a > instead of a + or taking it away altogether, or any combination of these options.
This however:
a[href="/patterns"] {
font-weight: bold; }
does make the navigation item I want bold, but it is bold on all pages. Now I just need to get it bold on that one page only. However, I don't see anything else on that one page to refer to other than it's specific url. Is there anyway to write that rule and make it work using only the URL I have?
Thanks.
Related
We are building a prototype shop using Squarespace with the four pages:
Home, Store, About, Contact.
Unfortunately all pages inherit the same style from the site's design templates. What we would like to do is something similar to this where the colour of the link on certain pages could be changed.
Is there a method of overcoming the fact that the same class class="header-nav-item header-nav-item--collection"is being used for all pages in order for this type of solution using custom CSS can be applied?
Yes, this is possible. Using nth-child() selectors is an option, though you might consider referencing the element via its href attribute instead, like so (of course, substituting the color of your choice):
.header-nav-item a[href='/about'] {
color: red;
}
If you choose to use nth-child(), do like so:
.header-nav-item:nth-child(3) a {
color: red;
}
Finally, to edit the color of the nav item that corresponds to the active page (whatever page the user is on), you'd write something like:
.header-nav-item.header-nav-item--active a {
color: blue;
}
Finally, if you'd like to change the color of all navigation items when the user is on a specific page, you can do so by using the collection ID, which is used as the id attribute on the body element in most if not all Squarespace templates:
#collection-5d7ef2011673f45f239d1c51 .header-nav-item a {
color: green;
}
As a helpful tip (which you may already be aware of), you can use your browser's developer tools web inspector to inspect the element and then write your own CSS according to the rules generated by Squarespace.
I'm working on Squarespace for a client that needs to add special blog post that are styled different.
The problems is that this template doesn't allow it and the client can't code, so I'm trying to do it with custom CSS in a way that prevents errors.
All this "special" post have a link with href that contains the word "special", so I'm styling them with the css selector:
[href*="Special"] { style }.
My question is if the client add more special post like "Special landscape", "Special Images", "Special theme" and so on, i can target them with:
[href*="Special+l"] { style }.
[href*="Special+I"] { style1 }.
[href*="Special+t"] { style2 }.
Is there a way to style them differently based on the href without needing to know the first letter of the second word?
Otherwise if the client put a different second word the style will not be applied.
I tried with nth-of-type() and so on but since each link are child of different blog's cards it doesn't work.
I hope explain myself :)
I think it is not possible the way you would have like it.
If you want to have different stylings for these links, for example:
// in blue
// in red
// in green
you need to know what is the second word of the link to give it a special styling.
ATM in your case you can have different styling for normal links, links with "special" in the href-attribute and links with "special-" plus more words in the href-attribute.
If you do not know the second word, all you can do is to prepare stylings for as many cases you can think of.
Another way COULD be, that you give your customer a list of special string combinations which you prepare to have an own styling if he uses them in the link.
// in blue
// in green
// in red
and in your CSS you have:
a[href*=c0000FF] {
color: blue;
}
a[href*=c00FF00] {
color: green;
} a[href*=cFF0000] {
color: red;
}
You can tell him to use these special strings if he wants to have his link in a special color. But this is 1. not really comfortable for him and 2. quite a strange look in the URLs.
Edit: and be sure not to use real words or strings that could be used in other links if you don't want them to be colored by mistake.
you can use href attr to select it
a[href*="http://abc.go.com"] {
color: #db4344;
}
link 1
Since you accepted the above answer, here is another way I think it could be better as am not sure appending color like that inside links is a good idea.
You can rely on CSS variable and do something like this:
a[href*=special] {
color: var(--c);
}
link 1
link 2
link 2
Or you can directly apply inline-style:
link 1
link 2
link 2
Or use data-attribute:
a[data-color="red"] {
color:red;
}
a[data-color="blue"] {
color:blue;
}
a[data-color="green"] {
color:green;
}
link 1
link 2
link 2
I'm trying to modify the css style of the word (button) "All" in Post Grid filter of Wordpress plugin Visual Composer...I'm able to do it for all the words of filtered categories but not for the specified one "All"...Firebug show me that style: <span data-vc-grid-filter-value="*">All</span> where I suppose the symbol * define all the words of categories...Anyone knows how can I modify that style?
Without example code it is always hard to answer.
Maybe this helps:
span[data-vc-grid-filter-value]:first-child {
font-weight: 700; /* just an example adjustment */
}
I assumed that "All" is the first element in a series of elements. If this selector does not work, try to go more specific (e.g. li > span[data-vc-grid-filter-value]).
If you can provide a sample of the page, where this element is located, and the corresponding CSS, then the answer may be more helpful.
I am using a WordPress premium theme that has a 25.000+ lines styles.css. I want to change the font and main color sitewide, and for this I would like to catch ALL classes and IDs that use them for my childtheme.
Manually searching through 25.000 lines and then selecting and copying the classes together is a very slow procedure, and I am sure this can be automated with RegEx and the preg match all thing or the like, but I know too little about creating such a script.
But at least I could figure out the logic that a script for such a task would need to follow.
So let's say I need a rule that collects ALL classes and IDs to which the font Roboto is assigned.
Basically it needs to
1. find Roboto, then
2. go back to the { and
3. collect everything before { until
4. the last } before, so it needs to go backwards searching
5. This it needs to do through the whole document, to catch all classes to which Roboto is assigned.
The result will be a very big list of comma-separated classes which I can then easily assign the new font to.
Does any of the RegEx experts see the string already in front of his eyes? I am sure it is not that difficult for someone who "speaks" RegEx fluently, but I got soon lost trying to learn it myself, I only succeeded in simple replacments.
...
last CSS rule ending here.
}
.some,
.classes,
.and,
#IDs to collect them all,
#not only from this one css rule,
. but from a whole 25.000+lines stylesheet
{
font-family: 'Roboto', sans-serif;
font-size: 32px;
color: ...
etc.
}
...
There is currently no way of targeting all classes with a specific CSS Rule like font-family either with CSS, JavaScript, or jQuery
But, you can do searches for:
'begins with..'
div[class^="something"] { } /* target divs */
*[class^="something"] { } /* targets everything */
div[id^="something"] { } /* target divs */
*[id^="something"] { } /* targets everything */
which would work on something like this:-
<div class="something-else-class"></div>
'contains..'
div[class*="something"] { }
which would work on
<div class="is-something-here"></div>
<!-- class name can be anything. "something" can be anywhere -->
'ends with...'
div[class$="something"] { }
which would work on
<div class="you-are-something"></div>
This way you can target all classes and/or id's that have a font-family Rule and change it.
Reference
CSS3 Attribute Selectors: Substring Matching
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}