Help with some design elements
-
Now you made the height enormous, but still no trace of the “background” line. Could you please paste here the exact thing you tried to paste into the CSS editor?
-
I copied and pasted exactly from above:
header .logo-row {
background: url(“http://veggiesdontbite.files.wordpress.com/2013/11/veggiesdontbitelogo2.jpg”) no-repeat scroll center top rbga(0, 0, 0, 0);
height: 150px;
text-align: center;
width: 100%;
}header .logo-text h1 {
color: rbga(0, 0, 0, 0);
}I have two images I can use, I started with the original large one and then made a smaller version thinking that was the problem…
This is the URL of my original logo- the big one Dimensions: 2049 × 1262:
Here is the URL of my logo when I exported it from iPhoto into a smaller size, Dimensions: 640 × 394:
-
-
I tried things in my test bog to see what’s wrong. The line in question is invalid (so it has no effect and I can’t see it when inspecting the page) because there’s a typo in it: it says “rbga” instead of “rgba”.
Now, apart from this there are other problems:
a) You really want that image as a header image? Its height is too much in relation to its width, so it will take up the whole screen and a visitor won’t see any of your posts before scrolling down.
b) The theme is responsive: it stretches and shrinks to adapt to different screen resolutions and mobile devices, so your image cannot display correctly no matter what the screen. Thesacredpath’s suggestion (with the typo corrected and the height value changed) won’t display the whole image unless you create a 1280px wide version, and it will display less and less of it on narrower screens. Here’s a modified version that will display the complete image on any screen, which means it will distort it on narrower screens:header .logo-row { background: url("http://veggiesdontbite.files.wordpress.com/2013/11/veggiesdontbitelogo2.jpg") no-repeat scroll center top transparent; background-size: 100% 789px; height: 789px; text-align: center; width: 100%; } header .logo-text h1 { color: transparent; }First, see how huge the image is.
Second, drag the browser window to make it narrower and see what will happen on mobile devices. -
Would it help to make the picture smaller?? I can manipulate its size easily.
Also, is there a way to upload it under the “logo” tab in customize but make it bigger?? I tried that but it’s a little small for what I want.
And if I take away the title but leave the tagline, can I make the tagline centered on the bottom of the header instead of the middle of the header?
-
Would it help to make the picture smaller?
If you insert it as bg image, no: on narrower screens it will either be cut off or it will be distorted. This workaround works well on fixed-width themes only.
Also, is there a way to upload it under the “logo” tab in customize but make it bigger?
Yes! Fortunately the logo image is scaled down in the CSS of the theme, so we can use CSS editing to display a larger version, with no side effects. If you want it full width, create a 1170px version (but make it short in height, so it won’t take up too much space).
can I make the tagline centered on the bottom of the header instead of the middle of the header?
Yup.
-
Would I make the 1170px in iPhoto? As in export it as that size? Then just upload it and it will be bigger?
How do I make the tagline centered at the bottom of the header once I upload the logo and delete the title?
-
Yes, tried the CSS you gave me for the logo and it looks awful…I wish it could just be smaller and centered, kind of like how I can uploaded it in the logo area but instead of on the left side of the header it was in the middle…and bigger.
Ok, I went to iPhoto and exported the logo image as an 1170px version. I uploaded it to my media library. Here is its url
I uploaded it under the logo section in customize, but it still is a smaller image on the left of the header. What CSS can I add to make it a little bigger?
I also deleted the site title in the customize area, but kept the tagline. How do I bring the tagline down so it lies on the bottom of the header instead of centered like it is now? Is there a CSS for that too?
Thank you!
-
Here’s another pic I created, will that work better for any of our above or previously tried options??
-
Paste this:
header .logo-row { display: block; text-align: center; } header .logo { display: block; } header .logo img { max-height: 225px; } header .logo-text { display: block; margin-top: 16px; }Change the 225 to adjust the size of the current logo, change the 16 to adjust the space above the tagline.
Note: this will take care of things on desktop screens, but on narrower devices the logo will still be a small thumbnail. I’m not comfortable with the required CSS yet, so better wait for thesacredpath to complete this solution.
-
That’s awesome! Thank you…looks great. Is there a CSS to change the size of the tagline text?
I’m guessing thesacredpath is on vacay?? Hope somewhere fun! Yes, looked at it on my cellphone and it is still a thumbnail on the left of the header, so hopefully he will have a fix for that.
-
-
Oh, one more quick question…is there a way to only have the first part of each of my posts show (like maybe the first paragraph or something), and have a “read more” link to take you to the whole post? The problem I’m having is that people don’t realize that they have to click on the title to see the post on its own in order to leave a comment, so no one is leaving comments and instead doing them on my FB page. But I want to build activity on my site so was thinking if there was a way to make them click on “read more” and go to the separate post that way they will see the comments.
-
a) You’ve added this:
header .logo-text h5 { color: #059E9B; }Turn it to this, and change the percentage to adjust the font size of the tagline:
header .logo-text h5 { color: #059E9B; font-size: 120% !important; }b) To display only the beginning of each post you need to insert a read-more tag manually:
http://en.support.wordpress.com/splitting-content/more-tag/ -
Thanks!! Just check it out. So in reading I see that to copy my posts from my word document isn’t good?! This is where I write all my recipes so I don’t know how else to post. I don’t see an issue on the site yet but could something develop later?
-
Don’t copypaste into the Visual editor: you can safely paste from Word after you switch the editor to “Text”, so that only the actual text and no wrong code will be inserted.
-
-
-
Ok, so far I don’t see any issues, so I’ll just change the way I do it going forward since It would be a lot of work to redo all my previous posts. So just to make sure I’m doing this right:
1) Copy from my Word document, but paste in the “text” side of the new post versus the “visual” side.
2) Then I can move back to the visual side and add in pictures/media in the places of the document that I want them in.
BTW, thanks for the tip on adding a “more” function to my posts. It has worked with my readers so far and even got a comment today! I actually read through the help page thoroughly and also learned how to change the text in the “more” link to what I wanted it to say :O)
You guys here at WordPress help are awesome. I have learned so much that really would be near impossible for me to learn on my own! If there is anywhere I can go and review you guys let me know. I’d be happy to give you all a great review!
-
You’re welcome.
Yes, you paste the text into the so-called Text editor then you switch to Visual to insert images or use the extra tools it provides. You also use the Text editor when you need to add coding.
Of course you can also insert the images while on the Text editor view, but most users find it more convenient to see the actual images instead of their code. (Personally I never use the Visual editor.)And thanks for your kind words. No, there’s no place where you can review us.
By the way, grey frame around avatar, username etc means WP staff member; no such frame means fellow blogger volunteering.
- The topic ‘Help with some design elements’ is closed to new replies.
WordPress.com Forums 