hello I have a little problem after adding a widget script "Recent Post by Label on Static Pages" on the static page my header image has changed slightly but only on this page where I have add the script, for other pages it is good no problem the header image look great can you give me a solution and thank you
the problem page : https://mon-blogger-code.blogspot.com/p/tutoriel-blogger.html
enter image description here
enter image description here
You can remove height: 90 from the #header-blog style rule. It makes the height fixed, and removes part of your header image. If you can't change the style rule, add a new one that says:
#header-blog {
height: auto!important;
}
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.
This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.
.page-id-15 .bannerImage {}
.postid-15 .bannerImage {}
I have tried both background image and background color with Chrome Developer Tools not displaying that it is seeing this style.
I have confirmed the correct page/post id of 15.
I have put the background image/color into .bannerImage and it displays as expected.
Not sure what else to try. This should be easy.
/// This will display background image and/or color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/// This will not display background image and/or color (showing color style) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>
/// Word Press Admin URL to show correct page/post number ///
http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
http://box5308.temp.domains/~naiedmon/contact-us
I expect to see a banner that is 337px high with a width of 100% that is different on each page.
What I actually see is a blank white banner space with the H2 displaying.
Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.
***** updated *****
Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.
Screen Capture of Code from Chrome Developer Tools
WordPress sometimes re-writes your CSS. I had this problem before. try using "!important" in all of your CSS attributes. this probably works.
I have had to move on and find another solution to my problem. Unfortunately I have not been able to successfully work with page ids as CSS selectors. My solution around the problem was to add additional classes and call them that way.
Example being on my about page to make a selector .about and attach my background image to that class. A simple fix but I was hoping to understand why I couldn't get the page id to work as a selector.
Onward and upward! Thank you to the community for your responses and attempts to help me out on this!
I was able to get help in the WordPress.org forum and so I thought I would put the answer here in case someone else has this problem.
What I did:
So, for some reason I decided to write my body tag like this (and continued to overlook the error):
<body class="body" <?php body_class(); ?> >.
I do not need to call the class "body". Once I deleted class="body" the correct body string was written and I can now call styles by page id.
The correct body tag in my case looks like this:
<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >
The exact advice I received:
The main problem is that you’re not calling the body_class() function
in your theme. Once you do that, the right body classes (like
page-id-15, etc) will be associated with the body element. Right now,
your body element looks like: <body class="topgradient">
If you change your site to another WordPress theme, and then inspect
the body element, you’ll see what it’s supposed to look like.
I am very thankful for communities like this and others!
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>