Creating background color or images for pages under CSS
-
Hi Raj,
I hope you don’t mind me jumping in here while Richard’s celebrating Thanksgiving in the US. :)
Once again thank you so much. As you suggest I have added (margin-right: 5px;) for creating a space between each social icon; this affects increase in size of social icon and not the space between them. These icons are still joint each other.
I can see you’ve added margin-right to the links (for example, to #menu-item-69520 a), which create space between the icons. Instead, you should add margin-right directly to each menu item, like so:
#menu-item-69520 { margin-right: 5px; }Secondly I have also added CSS rules for different header Images for each main menu pages( Btgraj Art, Seminars, Free Tools, Events, About and home). It looks very nice when I see on my PC but these header images are not fully displayed on PC.
Also when I open my website by using android phone then this header images are not displaying in full and the site title and menus not coming under these header images hence it doesn’t look appropriate and menus and site title are unreadable because of its white color without header image. I don’t know why? Please guide!
In order to get the whole header image to display, you’ll need to set the container it’s in to be the same height as the image.
For example, for your Events page you should set the height to be a minimum of 400px (the height of the header image being used on that page):
.page-id-68410 #branding-inner { background: url(https://betterthangoodlifedotcom.files.wordpress.com/2016/11/banner-1686943_1280.jpg) no-repeat scroll top center / 100% auto; min-height: 400px; }I recommend using images that are the same height for the headers across your page to ensure consistency.
To make sure the image takes up all of the available space on mobile devices, you can make use of background-size: cover; in your CSS:
.page-id-68410 #branding-inner { background: url(https://betterthangoodlifedotcom.files.wordpress.com/2016/11/banner-1686943_1280.jpg) no-repeat scroll top center / 100% auto; min-height: 400px; background-size: cover; }Although the above will make sure the image takes up all available space, it will crop it on smaller devices. There isn’t a way to stop the image being cropped without also leaving white space around it on smaller devices (which isn’t that attractive an option).
Let me know if the above works out for you.
-
Hi Siobhyb,
Firstly let me say many many thanks to Richard and to you for all your help and guidance. As per your suggestion I have added these rules and it is now looking so nice and beautiful on both PC as well as on mobile device. Thank you so much.Can you please resolve this three issues as well…
1) I want to increase the width of content (paragraph) and images of all pages to full length same as header image width i.e from one end to another end of computer screen.
2) Is it possible to change the color of font on each header differently. Like I used an image on About page where site title and menu list are not readable because they are of white color fonts and background images is also having 80% white color.
3) I am enabled to add header image on Blog page.
4) Can I have a different templet for different pages? How I can do that?Please help
Kind regards
Raj -
Hi Raj,
You’re most welcome! I’m glad you like the look of your site so far. :)
1) I want to increase the width of content (paragraph) and images of all pages to full length same as header image width i.e from one end to another end of computer screen.
You could use CSS to increase the maxiumum width of the content area from 980px:
.row, #branding .container { max-width: 1080px; }You would then need to enter the maximum width you set in the Media Width field, which can be found near the bottom of the Customizer’s CSS panel, to match the custom CSS. This will increase the default width of your images to fit in with the new width of the content area.
It’s also worth being aware of best practices when it comes to line length and what is/isn’t optimal for readability. The following guides offer some more in depth information on that:
-
2) Is it possible to change the color of font on each header differently. Like I used an image on About page where site title and menu list are not readable because they are of white color fonts and background images is also having 80% white color.
That’s absolutely possible! :) You would first need to follow Richard’s previous advice on finding a page/post ID. From there, use the following snippet as a template to change the colour of the title on that page/post:
.page-id-68404 #branding h1 a { color: #663399; }Replace “68404” with the ID of the page/post you’re trying to change.
You can also change the value of #663399 to any colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of colour codes and their corresponding values. Here’s an example of a site that I’ve used before:
-
3) I am enabled to add header image on Blog page.
You can target .blog in your custom CSS to set a header image on your Blog page, in a similar way to how you’ve set images for single pages on your site:
.blog #branding-inner { background: url(https://betterthangoodlifedotcom.files.wordpress.com/2016/11/header-for-about-page1.png) no-repeat scroll top center / 100% auto; min-height: 400px; background-size: cover; } -
4) Can I have a different templet for different pages? How I can do that?
You can set a template via the editor’s Page Options module, as explained here:
https://en.support.wordpress.com/pages/page-options/#template
The options available to you vary depending on the theme’s built in settings.
-
Hi Siobhyb,
I am so happy to say you and Richard many thanks from bottom of my heart for all yours help and guidance towards my query to get things done.1) I have added this (.row, #branding .container {max-width: 1700px;}) and then I have also added the same value 1700px in media width but still the images on pages doesn’t cover the full width of screen from one end to another end same as top header image. I want the images on pages cover the full computer screen width. What values do I need to insert to get it? Please guide!
2) Some images on pages are not coming in center (https://betterthangoodlife.com/). In this page the 4th image of Gautama buddha; its on left side align hence doesn’t look good. It should come in middle with full width screen like above three images. Please guide!
3) With your advice I am now able to change the font color of header site title ( Creative Progenitor Institute) on each page separately but I am enabled to change font color of menu list ( Menu,Home, About, Blog, Events, Free Tools, Seminars, and Btgraj Arts) for each page separately so that it can be readable and visible (https://betterthangoodlife.com/). Please help.
4) About creating different templet for pages I didn’t find page-options/#template on my dashboard. I really wanted to create a different templet for my seminar (Child Pages) page. Please help!
Many good wishes for you!!
Raj
-
Hi Raj!
1) I have added this (.row, #branding .container {max-width: 1700px;}) and then I have also added the same value 1700px in media width but still the images on pages doesn’t cover the full width of screen from one end to another end same as top header image. I want the images on pages cover the full computer screen width. What values do I need to insert to get it?
The challenge here is that the image at the top of the page is a background image – the others are actual image elements, so they behave a bit differently. The images will go to their own maximum widths, but won’t stretch beyond that the way a background image will do.
Getting all of the images to stretch to full width would mean manually building HTML elements with specific background images on each one. Basically you’d be writing a lot of custom HTML for each page.
The 1700px number you’re currently targeting is a good middle ground – on many screens that will be full width, and it will look good on really wide screens, and it won’t require as much custom code :)
At the moment, it does look like your header image 9″Better than good life”) is set to be randomized between two versions of the image. One of them is 1500px wide and the other is 1933px (but it maxes out at 1700 under your current settings).
Try using the Customizer’s Header Image section to choose just the larger image and it should look better.
-
2) Some images on pages are not coming in center (https://betterthangoodlife.com/). In this page the 4th image of Gautama buddha; its on left side align hence doesn’t look good. It should come in middle with full width screen like above three images. Please guide!
Try editing the page and making sure all of the images are set to be Center Aligned. If they have no alignment set, they won’t center properly :)
-
Oh – actually it looks like you have the images centered, but there’s some CSS getting in the way.
You’ve added this CSS:
.aligncenter { margin: 0; }That eliminates the horizontal margins, which are what center the image.
Try using this instead:
.aligncenter { margin: 0 auto; }That will mean 0 for vertical margins, and then automatic margins to center the image.
-
3) With your advice I am now able to change the font color of header site title ( Creative Progenitor Institute) on each page separately but I am enabled to change font color of menu list ( Menu,Home, About, Blog, Events, Free Tools, Seminars, and Btgraj Arts) for each page separately so that it can be readable and visible (https://betterthangoodlife.com/). Please help.
This is another time when those page IDs you’ve been using will come in handy.
For example, on your home page, you have this CSS to change the site title:
.page-id-68618 #branding h1 a { color: #574424; }You can use the same page ID to change the navigation link color on that page. Using my browser inspector, I can see that those links are all in the
.site-navigationelement. That means we can use this CSS to target it specifically:.page-id-68618 #branding .site-navigation a { color: #574424; }That code will make the links match the title on https://betterthangoodlife.com/home/
In fact – if you wanted to use the same color for the title as the links, you could combine them into a single style for that page, like this:
.page-id-68618 #branding h1 a, .page-id-68618 #branding .site-navigation a { color: #574424; } -
4) About creating different templet for pages I didn’t find page-options/#template on my dashboard. I really wanted to create a different templet for my seminar (Child Pages) page. Please help!
You won’t actually create templates for the different pages. Your theme has a number of built in templates that you can choose from though.
If you click on My Site > Pages, you can select a page you want to edit. Then under Page Attributes on the left you can select on of your theme’s built in templates.
-
Hi there,
As suggested I have added certain codes to get the full width of media images for my pages. I am happy to say that it gives a positive results , which are as under
.main-outer {
padding: 0;}
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption, img.attachment-thumbnail, .gallery-icon img {max-width: 100%; }Now the new issue comes by expanding the width of images in full also expanded the width of text content of paragraph too. Which doesn’t look good at all on wide-screen of PC. It makes very uneasy to read text the conent.
While chatting I got some suggestion to reduce the width of text content without affecting the full width of page images. Which I tried but didn’t workout. Which is as under
1) Surround all your text ina special <span> or <p> tag
2) Then give them a class, such as <span class=”textwidth”>
3) Then control the width with CSS. Otherwise, it’s not possible to reduce the width of the text without affecting the images.
.textwidth {
width: 70%;
margin: auto;
}
4) something with html like
you’ll need to edit your pages, and remove ant <p> tags from outside any images.
5) All of your images are inside these tags <p style=”text-align: justify;” align=”center”> and] <p> </p> remove all these.I did above 3 but that didn’t work and about number 4 & 5 I am not able to do that correctly because its all html. I tried it and it all mess.
Width of the images on pages is set to full screen; that’s done. I am happy for that. Now I want to reduce the width of text conent of any given pages without affecting the present set width of page images.
Please help
Raj -
Hi @sururaj!
There are two ways to approach this, it sounds like you heard both in chat. Both of them will involve editing your HTML manually.
Option 1: add a special class to text paragraphs
On your home page, your first text paragraph (in HTML) looks like this:
<p align="center"><span style="color: #000000;">Our vision is to helping people to live a better than good life by raising the quality of thoughts to a higher level.</span></p>To make this paragraph narrower, we need to add a class our CSS can target, like this:
<p class="text-width" align="center"><span style="color: #000000;">Our vision is to helping people to live a better than good life by raising the quality of thoughts to a higher level.</span></p>Then, this CSS will target that class and modify the width:
.text-width { width: 70%; margin: 0 auto 18px }In order for this option to work, you’ll need to edit the HTML of your post and add the class to each and every text paragraph.
Option 2: remove the paragraph tags surrounding your images
Right now, your text and your images are all wrapped in paragraph tags. If you remove the paragraph tags around images, you can then target just paragraphs with your CSS.
Here’s an example. The first image on your page, in HTML, looks like this:
<p style="text-align:justify;" align="center"><img class="size-full wp-image-69529" src="https://betterthangoodlifedotcom.files.wordpress.com/2016/09/about-page-images-btgl-1j.png" alt="about-page-images-btgl-1j" width="1318" height="692" /></p>If you remove the paragraph tags from the beginning and the end, it will look like this:
<img class="size-full wp-image-69529" src="https://betterthangoodlifedotcom.files.wordpress.com/2016/09/about-page-images-btgl-1j.png" alt="about-page-images-btgl-1j" width="1318" height="692" />Now it is just an image tag, that isn’t wrapped in a paragraph. Once you’ve done that to all of the images, add this to your CSS:
.entry-content p { width: 70%; margin: 0 auto 18px }That will make all of the paragraphs in your page narrower. As long as you’ve removed the paragraph tags from the images they won’t be affected.
Of those two options, I would go with option 2 – that will be less difficult long term.
My actual recommendation would be to make the content column wider than it was originally if you want, but not full screen. The 1080px that Siobhan suggested earlier will make for wider images, but still readable text.
-
Hi Chad,
Many thanks for a great and prompt solution. As you suggested I have tried to fix it with option 2 ; it reduces the width of content paragraph but it also reduces the width of page images. Which I don’t want.
As I wanted full screen width of images hence I have chosen the first option. It is very difficult to edit html text content because it doesn’t show any paragraph or space between images and text content. So it is very difficult to find out text content and then to add a suggested class to each and every paragraph.
Some how I did it for three pages including About page. As you can see I have already written some 30 posts and many pages with full of text content and it is now tedious job to add this class to all text paragraph. Is there any other solution? If yes then please let me know. Or else If you check whats wrong with Option 2 so that I can use that one.
Secondly I have added a background images in one of my page https://betterthangoodlife.com/magic-of-mind-faculties/ It looks good on PC but it is not getting fit on mobile. If you see this above page on mobile it doesn’t cover the entire page. What’s the solution?
Kindly guide and help
-
Hey sururaj
Many thanks for a great and prompt solution. As you suggested I have tried to fix it with option 2 ; it reduces the width of content paragraph but it also reduces the width of page images. Which I don’t want.
If the CSS is making the images narrower, they’re probably still wrapped in a paragraph tag – it won’t work unless those are removed. Is there a page that you removed the tags on that I can look at?
As I wanted full screen width of images hence I have chosen the first option… it is now tedious job to add this class to all text paragraph. Is there any other solution?
This is what makes option 2 the preferable one :) There isn’t a faster way to add a special class to the different paragraphs.
Try option two again, making sure the paragraph tags are removed from around all of your images, and send a link to the result :)
Secondly I have added a background images in one of my page https://betterthangoodlife.com/magic-of-mind-faculties/ It looks good on PC but it is not getting fit on mobile. If you see this above page on mobile it doesn’t cover the entire page. What’s the solution?
An image like that won’t always work perfectly in the header, because it’s trying to cover the header space – which means on different screen sizes the header won’t be the right shape to display the full image.
You can try altering the CSS you used to set the background image.
Try changing the ‘background-size’ value from ‘cover’ to ‘contain’ – that will tell the browser to scale the image so it fits on the screen at all times, but it will leave a bit of a gap on some screens.
Rather than using an image like this in your header (where it has to compete with the text in the header in addition to the sizing issues) I’d recommend putting it in the actual page instead.
-
Hi Chad,
[ If the CSS is making the images narrower, they’re probably still wrapped in a paragraph tag – it won’t work unless those are removed. Is there a page that you removed the tags on that I can look at? ]As you suggested I have used option 2 and have done following changes which is as under
<img class=” size-full wp-image-69124 aligncenter” src=”https://betterthangoodlifedotcom.files.wordpress.com/2016/10/btgl-affirmation-page-image.png” alt=”btgl-affirmation-page-image” width=”998″ height=”771″ />
and you can see it reduces the width of images along with width of text content paragraph.
Now what to do please suggest.
Many thanks
Raj -
Hi Chad,
with refrence to above changes by using option 2 it is not only reduces the width of images in that particular page but also it reduces the width in all other pages.
https://betterthangoodlife.com/the-magic-of-mind-power/ -
Okay, I see what’s happening now – even when we remove the paragraph tags, WordPress adds them in the background because it wants each element (like an image) to have a container.
Here’s a new plan: Edit your page, and locate the images in the HTML.
Remove the paragraph tags from before and after the image, and replace it with a <div> tag, so it looks like this:
<div><img class=" size-full wp-image-69124 aligncenter" src="https://betterthangoodlifedotcom.files.wordpress.com/2016/10/btgl-affirmation-page-image.png" alt="btgl-affirmation-page-image" width="998" height="771" /></div>This way, we’ve added our own container, and WordPress won’t try to supply one for us.
As a test, I’ve gone through and applied this change to the images on https://betterthangoodlife.com/the-magic-of-mind-power/ – you can do the same on other pages for the same effect :)
-
Hi Chad,
I have done the necessary changes as per your suggestion and it’s now looking nice. Many thanks for all your help.I have created a testimonial page ( https://betterthangoodlife.com/testimonials/ ) and in that page I want to add the testimonials of my clients with their photos. Can you please suggest how I can do that? I have created one pdf page( https://betterthangoodlifedotcom.files.wordpress.com/2016/12/testimonial-text.pdf ) to show you how I wanted my testimonial page. Please Guide.
Kind regards
Raj
- The topic ‘Creating background color or images for pages under CSS’ is closed to new replies.
WordPress.com Forums 