I have tried for hours in vain to use a widget of pinterest to have different background and text colour in description. My page is
http://www.nicholasboydcrutchley.com/short-stories/woman-and-wolf
I know it changes its class on load.
Does anyone know what code and where to put in CSS?
Also, what html to use. Alternatively, can i fix the height of the widget so only the picture remains?
<a data-pin-do="embedPin" href="http://www.pinterest.com/pin/386535580491200669/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
I've even tried using a pin button, fixing the parameters, but I am very unsure how to include # in the description of the pin.... as in
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png">
If you know how to allow # in the description, that would be great too.
Thank you for your kind help
For the whole widget:
Remove the classes PIN_1404822151302_embed_pin PIN_1404822151302_fancy from the span and add your own class.
Copy and paste the relevant CSS that you want to keep.
CSS for span (remove any !important)
.myPinWidget {
/*styles I want to keep from old class CSS */
/*custom styles*/
}
OR
For the actual button:
Remove the class PIN_1404822151302_repin and add your own class
Copy and paste the relevant CSS that you want to keep.
CSS for current button
span.PIN_1404822151302_embed_pin a.PIN_1404822151302_embed_pin_link i.PIN_1404822151302_repin {
left: 12px!important;
top: 12px!important;
position: absolute!important;
height: 20px!important;
width: 40px!important;
background-size: 40px 60px!important;
background: transparent url(http://passets.pinterest.com/images/pidgets/pinit_bg_en_rect_red_20_1.png);
}
CSS for new button (remove !important)
.myPinButton {
/*styles I want to keep from old class CSS */
/*custom styles*/
}
HTML
<i class="myPinButton" data-pin-id="386535580491200669" data-pin-log="embed_pin_repin" data-pin-href="//www.pinterest.com/pin/386535580491200669/repin/x/"></i>
Related
I would like to remove the following from the HOMPE PAGE ONLY!
I have access to page editor but not sure what to insert in the CSS editor on that page.
I want to remove the below:
<div class="fs_img_header header_video_fs_view" style="width: 1028px; height: 789px;"><div class="stat_img_cont" style="background-image: url();background-size: cover;background-position: center center;"></div></div>
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none;
}
if you're using Wordpress and the css has no effect:
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none !important;
}
To display it only on the homepage use following plugin (easy-way):
https://de.wordpress.org/plugins/css-javascript-toolbox/
With this plugin you can choose where it displays your custom css (in this case the homepage).
Let me know if this helps.
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
Im using a third-party grid in my web app wich defines a sortable icon as a png image. I would like to override it in my style.css file with a glyphicon without changin the third-party source, is it possible?
The third party code:
div.column-header-container {
background: url('column-sortable.png') no-repeat right;
}
And my style.css would be something like:
div.column-header-container {
background: GlyphIconHere no-repeat right;
}
I just can find examples using it directly on the html tag.
The property you're trying to override is called background-image. All you need is an equal or higher specificity selector in your CSS (equal if it loads last) and a valid property value. You can do it in stylesheet (.css file), in <style> tag or in style="" attribute.
.css file:
div.column-header-container {
background-image: url('http://lorepixel.com/g/400/100');
}
<style> tag
<style>
div.column-header-container {
background-image: url('http://lorepixel.com/g/400/100');
}
</style>
Inline style=""
<div style="background-image:url('http://lorepixel.com/g/400/100');"></div>
Specifically, for font-awesome, which seems to be the case, you want to do this:
go to cheatsheet this no longer works!
go to fa icon page and get the Unicode (example = "\f2da")
add this CSS:
div.column-header-container {
background-image: none;
}
div.column-header-container:before {
font-family: 'FontAwesome', fantasy;
content: '\f2da';
}
You will also need to specify font-size, probably position:relative or absolute, depending on use-case and perhaps position using top/left.
In some cases, adding fa class or fa-2x, fa-3x or fa-4x to parent helps, as it sets some of the properties you otherwise need to set yourself. However, don't count on it having the same size as other sister "natural" fa-* icons. You'll need to tame it..
I am trying to remove the inline style from the thumbnail navigator skin but am not sure how to treat this bit of html.
<!-- What is "div u=" please?
Is "u" a class here?
How does that translate to a CSS selektor? -->
<div u="slides" style="cursor: move;">
<!-- Here I can simply write ".p" as a CSS selektor?
How does the CSS selektor then know it
has to do with "u=prototype"? -->
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
<!-- Here I can simply write ".i" as a CSS selektor?
How does the CSS selektor then know it
has to do with "u=thumbnailtemplate"? -->
<div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
<div class="o">
</div>
</div>
</div>
So far I have never come across div u= in general or div u=slides, prototype, thumbnailtemplate, etc.
For better understanding, can one simply assign letters to divs and then assign those letters functions with jQuery? Where in your code is slides, prototype, thumbnailtemplate referenced? I would like to learn about this technique please. Can you provide a link or reference to this please?
Thank you for any help.
By the way, I have looked at a ton of sliders and finally choose this one. I am just about to start development with it and Bootstrap 3.3.2, I hope it will all work out.
Very NICE work from what I can see on the demos. They ALL work on my smartphone out of the pocket, something most of the other sliders did not manage. Well done!
If you don't mind me saying this, the only thing I would change is provide a folder "CSS" with only the CSS rules for the arrow-, bullet- and thumbnail- navigators, including the inline styles of the span, div=u and generally all elements that have inline styles.
Apart from that solid work. Thank you!
What is "div u=" please?
Re: There are so many elements in the slider, the 'u' attribute is customize attribute, jssor js library read 'u' attribute to identify the usage of an element.
Is "u" a class here?
How does that translate to a CSS selektor?
Re: 'u' is not a class. You can try $("div[u=slides]") to select the element in javascript. And you can add your own class as follows,
<div u="slides" class="yourclassname">
Here I can simply write ".p" as a CSS selektor?
Re: yes, you can. please use the following format to prevent conflicts from other sliders in the same page,
.jssort07 .p {
/* css */
}
.jssort07 .pav {
/* css when active */
}
.jssort07 .pdn {
/* css when mouse down */
}
.jssort07 .p:hover {
/* css when mouse over */
}
How does the CSS selektor then know it has to do with "u=prototype"?
Re: No need to think about it. The 'u=prototype' lets jssor js know it is the prototype element of thumbnails.
Here I can simply write ".i" as a CSS selektor?
Re: Yes you can. But please use the following format to avoid conflicts.
.jssort07 .p .i {
/* css */
}
.jssort07 .pav .i {
/* css when active */
}
.jssort07 .pdn .i {
/* css when mouse down */
}
.jssort07 .p:hover .i {
/* css when mouse over */
}
How does the CSS selektor then know it has to do with "u=thumbnailtemplate"?
Re: Please ignore it.
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.