I want to style the folder item of the secondary nav bar of this website I am designing with Jaunt template (still in progress. Password: edizioni_test):
https://tan-perch-9lhf.squarespace.com
I want the text ITA / FRA to be bold. I tried to style it with this css code:
span.Header-nav-item.Header-nav-item--folder a {
font-weight:900 !important;
color:#777777 !important;
}
span.Header-nav-item.Header-nav-item--folder a:hover {
color:#cccccc !important;
}
but I am ecountering this issue: when I click on the ITA / FRA link, this page opens:
issue: this folder does not contain any pages
How to fix it in order to click on the ITA / FRA and having it linked to the home page? Thanks
The generally-suggested method to disable / turn-off the click / link on navigation folders in Squarespace on various Squarespace template is to use pointer-events:none on the target element. On some templates, this requires then setting pointer-events:all on subsequent child elements, but not in your case.
In your case, we can simply target the specific element and leave it at that (sibling elements will remain clickable). Enter one of the following via the CSS editor:
a[href='/ita-fra'] {
pointer-events: none;
}
OR
.Header-nav-folder-title {
pointer-events: none;
}
The first method above targets the link via URL and specific to that link. The second is a more general rule that will apply to other such folders you may add to the header.
Note that this doesn't prevent "tabbing" onto the target link when using the keyboard or possibly assistive technologies, though it does typically prevent "executing" the link. To fully remove the link would require use of Javascript, but as I said, the CSS-only method is generally accepted in the Squarespace community.
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 am about to create a new blog but before launching it I want to test all the functionality for it. So I am not good with either CSS or any other coding. I want to know how can I show the internal links of my blogs in Green color, the links going out to some other sites (external links) in Red color and Affiliate links to Amazon or Ebay in Blue color on my all blog posts.
Please, can anyone tell me how to do it on my upcoming wordpress blog?
Depending on your linking convention you "could" make some assumption and use attribute selectors.
The following is based on the assumption that internal links are not absolute. E.g <a href="/somepath/to/somepage"> and external paths are absolute (which they have to be), e.g <a href="https://www.google.com">
/*Default style, applied to internal links*/
a {color:red;}
/*href contains // therefore absolute, and therefore external*/
a[href*='//'] {color:blue;}
/*href starts with #, therefore a link to an element on the page*/
a[href^="#"] {color:black;}
Google - External
Apple - External
Intneral
Links to internal page Id
HOWEVER
I would probably make this explicit and use classes instead. No assumptions made and you have control
/*Default style, applied to internal links*/
a {color:red;}
/*class for external links*/
a.external {color:blue;}
/*class for links to page id*/
a.idLink {color:black;}
Google - External
Apple - External
Intneral
Links to internal page Id
You should use a css attribute selector … something like this:
// All green
a {
color: green;
}
// External red
a[href*="//"] {
color: red;
}
// Amazon and ebay blue
a[href*="amazon.com"], a[href*="ebay.com"] {
color: blue;
}
You can select like this:
[attribute=value]: exact value
[attribute*=value]: value somewhere
[attribute^=value]: value at start
[attribute$=value]: value at end
With this you can select the links based on the href attribute they have and style them as you wish … you get the point i think?
A good solution for checking link on a specific page is Integrity for Mac Thats a app that lists all links of a page.
I've used custom CSS to create a strike-through effect for active menu items on my wordpress site: http://www.sekoul.com/
This is the code that I use to do this:
/* active menu item color */
.et_color_scheme_orange #top-menu li.current-menu-item > a {
color: #4a4a4a !important;
text-decoration: line-through !important;
}
However, on certain pages (ones which are generated by WP plugins), this effect doesn't work: http://www.sekoul.com/reading-list/
When I inspect the code, I can see that the ID's are not the same on these pages, but I can't seem to figure out which ID/class to apply the effect to. Any idea why this is happening / what I can do to select the appropriate ID/class ?
It's missing the .current-menu-item class because you're using a custom link. I'm assuming that "BOOKS" is a custom post type archive page, right?
If you need to have an active state on a custom post type archive page, you could try this solution that worked great for me: https://stackoverflow.com/a/22602901/4303385
It'll add a metabox on the Appearance > menu with custom posts type archive page with active state support.
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;
}
I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;