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.
Related
This is the html of what I want to hide
<div class="count">
<div class="number">1</div>
<div class="text">donation</div>
</div>
I've tried to use the CSS code:
.count {
display: none;
}
As well as:
body.page-id-750 div.count {
display: none;
}
For ref the body is:
<body itemtype="https://schema.org/WebPage" itemscope="itemscope" class="page-template-default page page-id-750 logged-in admin-bar wp-custom-logo ast-single-post ast-mobile-inherit-site-logo ast-inherit-site-logo-transparent ast-theme-transparent-header ast-hfb-header ast-page-builder-template ast-no-sidebar astra-3.9.2 elementor-default elementor-kit-442 elementor-page elementor-page-750 customize-support e--ua-blink e--ua-chrome e--ua-webkit ast-mouse-clicked ast-header-break-point"
Try with
.count {
display: none!important;
}
body.page-id-750 div.count {
display: none!important;
}
I looked add you website code and the problem is that you are loading a widget thats an iframe.
In basic an iframe is an element to show an other website inside your website. Your website doesn't control the iframe content.
Now the strange part is if i look add the iframe you are loading it with code from your own website? So the solution would be adding the css to your widget or iframe.
Is there a widget or plugin you are using?
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
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.
I have question regarding . I am using wordpress and create a new page then under that page i am using the and pass a url by attribute src. So the is working fine and url's page is showing in it. Here i have to remove some part of html from and i try to hide them on firebug, they hide there easily but not working when i apply my css to styelsheet file.
My css is not loads/works on , please suggest me a solution so that i can make my page comfortable.
#iframeBody iframe#contentArea {
height: 100%;
left: 0;
width: 100% !important;
}
#iframeHeader iframe#banner {
display: none;
}
#iframeBody iframe#menuItem {
display: none;
}
iframe#menuTab {
display: none;
}
<iframe src="http://freightforce.com/MainFrame.aspx?id=Customers_horz_accordion.aspx" width="100%" height="1000px"></iframe>
Thanks.
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>