Forum Replies Created
-
AuthorPosts
-
Tim SquiresMember
I've made a little bit of progress — I have managed to get my smallest header logo displaying, but it has some ugly white space around it that I need to remove.
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/media.jpg
Also, the recommended width sizes from the tutorial were:
240px
320px
480px
768px
1040pxHowever, my News Pro child theme lists only these width sizes in the css:
1188px
1023px
600pxI'm not sure how to make these media query sizes match up with my image sizes. Maybe I need to make only the three images specific to News Pro, but not sure.
Will keep trying 🙂 ...
Tim SquiresMemberHi Susan,
Thank you for running the test. I didn't know about the StudioPress responsive checker, so that will be very useful for me.
Yes, it works in terms of reducing the 1140px wide header down to fit smaller sizes, but what I need is for the media queries to deliver the logos at the requires sizes as you mentioned.
I have attached two screenshots. One shows the various sized test headers that I have uploaded, and the other shows how I would like them to display on the various screens (I cut and pasted using your screenshot).
As an experiment I tried putting in a media query for the smallest image, but it's not working, so I thought that I need to get that right before I go ahead and do all of the others.
Thanks again for your help - much appreciated.
Tim
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/sizes.jpg
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/sizes2.jpg
Tim SquiresMemberTim SquiresMemberHi Davinder, thank you very much — I understand now and have it working. Thank you again for your help, very much appreciated!
Tim SquiresMemberIt's OK, I found the code and commented it out:
.site-header { background-color: #000; min-height: 65px; /*--position: fixed;--*/ width: 100%; z-index: 999; }
Tim SquiresMemberHi Davinder,
Thank you, but do I need to modify the code that you have supplied in any way? And where in functions.php should the code be pasted?
I tried to follow the steps, but now my image area has vanished.
Do I need to add the url for the new header image that I have uploaded into the new code for functions.php?
Thanks for your help
http://www.timsquires.com.au/test
Tim SquiresMemberTim SquiresMemberTim SquiresMemberHi Brad,
Thank you, very much appreciated - that's almost what I need 🙂Is it possible to get the featured widget area to display in the area that I have shaded in the linked screenshot, rather than going full width below the site description banner?
I would like, if possible, to have the widget area sitting just above where my posts begin on the front page.
I suspect that I need to alter the hook in the add_action php, but not quite sure if I'm on the right track.
Any further tips?
Thanks again,
Tim
Tim SquiresMemberTim SquiresMemberTim SquiresMemberFantastic, thanks - the CSS snippet that you provided worked perfectly when I pasted it into the Extender CSS builder.
The pink looks great - but I think that my client might want me to stick to his nice shade of blue 🙂
That was a great and simple solution, plus those other tips are great to know about as well.
I really appreciate your help, many thanks.
November 13, 2013 at 6:22 pm in reply to: Use top, middle and bottom images on sidebar widgets #72822Tim SquiresMemberHi Denise,
That does sound tricky. Sadly my coding skills aren't good enough to figure that one out just yet, but I do have another suggestion from a design point of view.Currently your concept relies strongly on the use of the wooden frames around the chalkboard. Would it simplify your problem if you could drop the wooden frames, but still maintain a strong chalkboard effect?
Take a look at this tutorial on creating a chalkboard effect. It requires using Adobe illustrator, and you could just use the background of this idea without worrying about the type, but if you don't have that program, perhaps you may be able to source a stock image of a chalkboard. Notice how the chalkboard feeling is very effective - even without frames around the edge:
http://vectips.com/tutorials/create-a-chalkboard-type-treatment/
Even though this example doesn't have frames, the chalkboard effect is really strong. It may be possible to replicate this by using a repeating section of chalkboard image in the background of your widget area, so that it would expand/shrink according to the content placed within it.
Again, I'm Just thinking that it may be easier to achieve your desired effect without so many images to worry about.
I hope that helps.
Also, do you have a link to your site available?
Tim
November 12, 2013 at 7:54 pm in reply to: Use top, middle and bottom images on sidebar widgets #72602Tim SquiresMemberHi, I'm not sure that I follow. Do you really need so many separate images? Can you create one single chalkboard image to use as your widget background, with all frames in place, and then style the text over the top?
Tim SquiresMemberBrilliant - thanks so much. I should have realised that the size was wrong. I have been able to make the adjustment and it looks fine now in both portrait and landscape.
Thanks for your help and patience in solving this problem, I have really appreciated it 🙂
Tim
Tim SquiresMemberThanks Andrea, I tried that, but again, no luck sadly. Here is the area that I pasted the code into - does it look as though it should work?
@media only screen and (max-width: 270px) { .header-image .site-title a { background-size: contain !important; } .site-title { font-size: 26px; font-size: 2.6rem; } .site-header .widget { margin-top: 0px; } }
I would like that space to go if possible, but you must be getting tired of this - I'll understand if you are too busy to keep helping 🙂 You've provided a lot of time and I'm a lot further advanced than I would have been without your help. I really appreciate that - Thanks
Tim SquiresMemberThanks Andrea - After I changed the size of the logo I had trouble getting the nav bar to display correctly. I added "margin-top: 3rem" to move the nav bar back into its original position. That worked on my desktop, but didn't work on the iPhone.
I have now commented that line of code back out again, and that causes the nav bar display too high on my desktop. But even with the code now gone, the extra space remains on the mobile version.
I'm very confused 🙂
Thanks again for your help.
Tim SquiresMemberNp problem at all, Andrea - I really appreciate your help, and having the logo resizing correctly is a great start.
Tim SquiresMemberUPDATE: I just amended that code snippet to contain a hyphen, ie:
background-size: contain
... it seems to have worked! Brilliant - thanks so much - but the extra space between the logo and the nav bar remains. Any ideas?
Thanks again 🙂
Tim SquiresMemberThanks Andrea, I did upload the logo via Appearance > Header - does that complicate things?
I tried adding the code anyway, to see if it had any effect, but no luck 🙁
Does this look right? Or should I try another way of adding the logo instead of Appearance > Header?
Many thanks 🙂
.site-title a, .site-title a:hover { color: #222; display: block; padding: 28px 0 0; padding: 2.8rem 0 0; text-decoration: none; background size: contain; /*--added in--*/ }
-
AuthorPosts