first have to say that I have no idea of CSS. I am googling around and trying to customize my Squarespace webpage, reading comments, testing... Now I'm trying to make my blog more print-friendly. I inspected the entire page, looked for id's, classes, etc and then used
<style media="print" type="text/css"> /*Hide elements you don't want to print*/
#header, #footer, #preFooter, #rightSidebar, #sidecarNav, #contentinfo, #yui3-css-stamp, #_atssh, #service-icons-0, #rw_lso_flash, #at4-thankyou, .meta-above-title, .meta-below-title, .p-comment, .sqs-block-markdown, .rw-ui-squarespace-container, .entry-footer, .pagination
{display:none;} </style>
to remove whatever I don't want to be printed. However, there is one element which I don't know how to add to the list. It is basically the url address of my post title. I tried $(".entry-title.p-name").attr("href") but it didn't work. This is the code of one arbitrary post title on my blog:
<h1 data-content-field="title" class="entry-title p-name">
<a href="/updates/2016/4/7/fathers-sons-and-fishes" class="u-url" rel="bookmark">
Fathers, Sons and Fishes</a></h1>
I hope you can help me with this one.
Sincerely, Artur
.entry-title.p-name > a { display: none; }
Should work.
It sets any anchor inside a div with class="entry-title p-name" to non-visible. The > item indicates "child of". So, it translates to .entry-title.p-name 'children' a
Barring this, you can add a class to these specific anchors to hide that class.
What you have posted you tried ($(".entry-title.p-name").attr("href")) is a javascript or jquery selector. It is not CSS. You don't need javascript/jquery for this. If can be done with CSS.
Related
I want to edit the "p" content which is inside the content div on my shopping cart page.
As the content div appears on every page, I don't wish to just go for "content + p"
Is there an attribute I can use that will "select all p tags in the div above cart-module"
<div class="content">
<p>The content I want to edit<./p>
<div class="cart-module">
<div class="cart-total">
Also, is there a problem with attribute rules slowing down the pages?
If the structure is always as you describe in you question then you can go with the first child selector:
.content > p:first-child {
background-color: red;
}
wich will get the p inside the content only if it is in the first place inside of it.
Regarding your second question, it will always depend on how and how many attributes you use on each page. The attribute selectors are slower than the ids or classes, because the latter are indexed by the browsers, just for this reason. Anyway, if you don't use them massively surely you won't notice the difference.
Of course, if you have access to modify the html structure the easiest would be to add a class to the p tags you want to select...
It's not possible with pure CSS.
If you want to style "all p tags in the div above cart-module", do some JQuery instead.
First, define a piece of CSS:
.my-custom-css {
color: chucknorris;
}
Then use JQuery prevAll()
$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");
Oh you want to modify something like structure or content of those "all p tags in the div above cart-module", just do the same with prevAll().
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
This question already has answers here:
How to disable a link using only CSS
(25 answers)
Closed 8 years ago.
I have code here that i want to make the a href unclickable through CSS:
<div id="header"
style="background: url(/uploads/header/derivativesheader.gif)"
class="header-link">
<h1 id="logo" class="notext">
Title
</h1>
</div>
I cannot remove the hard coded href tag, but want to know if I can overwrite it's action using a CSS hack.
You can prohibit the click event with the pointer-events property: http://jsfiddle.net/NnEXn/
Remove no. Hide yes.
#logo a {
display: none;
}
However, this is probably not the desired result as it will also hide the inner content of the anchor (i.e. Title). As such, a JavaScript solution may be better suited. But to answer the question, this is a way using only CSS.
<a href="/" class="hide">
.hide {
visibility: hidden;
}
This will prevent the clickable action
I don't think this is possible (pure CSS). The only way I know of to make a link not clickable is to position another element over the link (zindex, still pure CSS), and be transparent so that the higher element is clicked and not the link.
Perhaps you cannot do this (as you said you cannot remove the hard-coded tag), but if you can add elements to the DOM, I would simply add a duplicate link with no href and set the other to 'display:none'. This will preserve the flow of the page, and the visual rendering of the link.
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.