A while ago I had managed with very limited CSS knowledge to remove the user name; widget boarder; picture boarder; and 'follow on Pinterest' button. This was achieved by tagging the widget (in HTML) with:
div id="pinterest-container"
and then using the following CSS commands to hide everything but the pictures:
#pinterest-container > span { box-shadow: none !important; }
#pinterest-container > span > span > a { display: none; }
#pinterest-container span a:nth-child(3){
display: none !important;
}
.post-body center div#pinterest-container span span a{
display: block !important;
}
.post-body center div#pinterest-container span span span a{
display: block !important;
}
However a short time ago this stopped working and the picture boarders, user name and ffollow button all returned: http://www.andrewmacpherson.me/p/precedence.html
I would be very greateful if someone could help me hide these again, I've been searching and testing but with no luck!
Many thanks
Andrew
I remember hiding things like this back in the Myspace days. Overriding certain elements was often a complicated and brittle process. Fortunately, we've now got CSS attribute selectors, providing a more elegant way to handle situations such as yours. The $= part of the following selectors are targeting class attribute values ending with those certain suffixes (_img, _col, etc.). Hopefully, these overrides will last a little longer than the last batch.
Remove picture and widget borders:
#pinterest-container [class$=_img] {
display: block !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#pinterest-container [class$=_col] {
padding: 0;
}
Kill the follow buttons:
#pinterest-container [class$=_button] {
display: none !important;
}
To remove the scrollbars, you'll have to do something a bit more general. Note: this will show all of the content in each group of images, so no truncation occurs.
#pinterest-container span span {
overflow: hidden !important;
height: 100% !important;
}
Related
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
I have 2 sets of menu items in my navigation bar.
Set 1 is labelled ".homemenuitem"
Set 2 is labelled ".othermenuitem"
I want to display homemenuitems on the home page and othermenuitems on every other page.
I was hoping to do this with CSS.
I started with the following
.home .othermenuitem {
display: none;
}
Which shows the correct menu on the home page, but I can't figure out how to hide the homemenuitems on every other page without using the unique page id (which will be a pain as the site grows).
Any help would be greatly appreciated.
Thanks
This is where the 'Cascading' part of 'Cascading Style Sheets' is your friend. More specific rules always override less specific ones, so if you do this:
.homemenuitems {
display: none;
}
.home .homemenuitems {
display: block; /* or 'inline' or 'inline-block', as necessary */
}
then the latter rule will override the former where it matches (on the home page), and otherwise, the first rule will always take effect.
Can you take the other way, making:
.homemenuitem {
display: none;
}
In every single page of your web, and only showing it on the home page id?
Thanks Michael, tweaked it a bit further and this is what worked for me, if anybody is looking for a similar situation.
.homemenuitem {
display: none;
}
.home .othermenuitem {
display: none;
}
.home .homemenuitem {
display: inline-block;
}
i have tried it on so many occasion , you can use this code .homemenuitem { display: none; } .home .othermenuitem { display: none; } .home .homemenuitem { display: inline-block; }
When using the jsTree plugin, I need to have a node which displays its full content. Right now, the nodes only display approximately one line of text each. How can I get the nodes in a jsTree to display all of the text in the node without truncating the node's content?
The following CSS code will do the trick:
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
This is a modification of the solutions here (height changed to auto) and here, neither of which worked for me on their own.