Extending header in Sight theme
-
Hi, thanks in advance for trying to help.
I am using the Sight theme and need to:
– Extend the header to 970 px across
– Put a footer at bottom (same width but narrow)Can you tell me how to alter the CSS to do this.
Thanks, Jean
The blog I need help with is: (visible only to logged in users)
-
Hi Jean, looks like you have been busy and have your header taken care of. Congratulations!
Love that header image. Love Owls.
Let us know if you have additional questions or problems.
-
Hi, glad you like the owls! I thought it was an appropriate image for a college campus.
I tried with the header and it seemed worked until I made it a pixel too wide and then it started to tile. I can’t seem to get it right on the mark at 940 px without a white space on the right edge that is only apparent with a colored background.
Other issues:
1. the header doesn’t resize well for the other platforms- tablet, mobile
2. how to add a footer to this page as well.
3. how to change font to arial, geneva or sans serif (our campus-mandated css styles)Thanks for the quick response.
You bring happiness engineering to a new level.
Jean
-
Jean, thanks (on the happiness level).
I thought it was an appropriate image for a college campus.
Heh, indeed it is. I remember those days.
If your header isn’t exactly 940px, we can adjust things with CSS, so don’t worry too much about getting it exact.
1. the header doesn’t resize well for the other platforms- tablet, mobile
On the Sight theme, it is difficult to get the header to resize for smaller screens without having a bunch of white space appear below the header image as it resizes. I’ve made a number of changes to a couple of your CSS rules. Replace the .site-header hgroup and #masthead rules with the below. It gets the image to resize and takes care of the repeating issue (changes repeat to no-repeat in the background declaration).
.site-header hgroup { background: none; } #masthead { background: url("https://ssufaculty.files.wordpress.com/2015/02/facultynewsowlheader1.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); min-height: 440px; margin: 0; position: relative; top: 0; width: 100%; background-size: 100% auto; padding-right: 0; }With the above change, you will see the header image resize, but the container it is in will not, resulting in a lot of white space below. We can add a number of media queries to get rid of the white space at certain widths, but it won’t flow and change smoothly if you narrow your browser window.
2. how to add a footer to this page as well.
We can add a copyright, or something like that to the existing footer credits, if that is what you mean. As far as adding a footer section independent of that, I would have to know more about what you are wanting to use it for before I can say one way or another if it is possible.
3. how to change font to arial, geneva or sans serif (our campus-mandated css styles)
I notice you are using some custom fonts right now. The first thing to do, if you want to switch to Arial-ish fonts would be to set both the heading and body text fonts back to Defaults. This is the original theme font stack for body fonts:
"Helvetica Neue",Arial,sans-serif
The headings originally were a serif, but we can change those easily enough to Arial-ish easily enough with the following (after you set the custom fonts back to default)..secondary-navigation a, .header-search input, .main-navigation a, .latest-posts-header, .page-title, .entry-header .entry-meta, footer.entry-meta, .entry-title, .cat-links, .widget-area, .widgettitle, .post-navigation .nav-label, .entry-content blockquote p, .comments-title, .comment .reply, .comment-meta, .comment-author, #reply-title, .site-footer, .menu-toggle, .main-small-navigation .menu { font-family: arial, geneva ,helvetica, serif; } -
This has been a great help.
Two more issues: Footer/Video embed
1. The footer we use has this CSS code:
#footer {
background: #f8f8f8 url(/images/global/footer-seawolf.jpg) left no-repeat;
border-top: 3px solid #4e6581;
color: #4a4a4a;
float: left;
font: 11px Arial, Helvetica, sans-serif;
height: 84px;
position: relative;
margin: 7px 0 20px 0;
width: 960px;
}
#footer p {padding: 14px 0 0 215px;line-height: 14px;}
#footer span.bold {font-weight: bold;font-size: 12px;}
#footer a {color: #4A6395;text-decoration: none;}
#footer a:hover {color: #3399ca;text-decoration: underline;}How would I tweak it for the WordPress site?
Video we want to use below does not embed. Can this be fixed?
http://jn1.tv/player/embed/202479
Thanks, Jean
-
Also, I have just received our official CSS for our headings and body copy.
Can this readapted on our WP site? Thank you.
This is for the headings:
#content > *:first-child, #content-nonav > *:first-child {
border-bottom: 1px dotted #c1c1c1;
color: #365990;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0 0 3px 10px;
margin-bottom: 7px;
}
#content h1, #content-nonav h1 {font-size: 18px;}
#content h2, #content-nonav h2 {font-size: 17px;}
#content h3, #content-nonav h3 {font-size: 16px; font-style: italic;}
#content h4, #content-nonav h4 {font-size: 14px;}
#content h5, #content-nonav h5 {font-size: 12px;}
#content h6, #content-nonav h6 {font-size: 10px;}———-
This is for the paragraph:#content p, #content-nonav p {
color: #000;
font: 12px Arial, Helvetica, sans-serif;
line-height: 18px;
padding: 4px 7px 7px 7px;
} -
On the video embed, this support document covers the video services that are supported here at WordPress.com.
On the CSS, yes, it is just a matter of finding the like sections in the CSS for Sight. There really isn’t a nav and nonav equivalent here at WordPress.com, as such. We have the normal full menu, and then at some predetermined point, the touch menu becomes active. On Sight, above 600px in screen/window width, the full navigation is active. Below 600px the touch menu is active.
On the content heading elements, this is the selector you would use for h1 in the content area.
.entry-content h1 { font-size: 18px; }You can use the above as a guide for creating the other heading element CSS.
For the content p, you can use the following, but you should be aware that this will only affect the paragraph elements. Lists, blockquotes, and a number of other elements may end up with the old font styling rather than the “p” styling.
.entry-content p { color: #000; font: 12px Arial, Helvetica, sans-serif; line-height: 18px; padding: 4px 7px 7px 7px; }My suggestion would be to use the following which will keep all content area text the same size and family. The second rule would apply the paragraph specific line height only to paragraphs.
.entry-content p, .entry-content li, .entry-content dd, .entry-content dt, .entry-content pre, .entry-content address, .entry-content div, .entry-content kbd, .entry-content tt, .entry-content var { color: #000; font: 12px Arial, Helvetica, sans-serif; } .entry-content p { line-height: 18px; }You will notice that I have left out the padding declaration. I’ve done that because the margins and padding for content is handled a little differently in most WordPress themes and including it could well end up making some stuff look out of alignment in the content area.
-
Hi, thanks!
The last major issue is the footer.
Here is our code.
How can it be adjusted for WP?
#footer {
background: #f8f8f8 url(/images/global/footer-seawolf.jpg) left no-repeat;
border-top: 3px solid #4e6581;
color: #4a4a4a;
float: left;
font: 11px Arial, Helvetica, sans-serif;
height: 84px;
position: relative;
margin: 7px 0 20px 0;
width: 960px;
}
#footer p {padding: 14px 0 0 215px;line-height: 14px;}
#footer span.bold {font-weight: bold;font-size: 12px;}
#footer a {color: #4A6395;text-decoration: none;}
#footer a:hover {color: #3399ca;text-decoration: underline;} -
Hi, some of the stuff doesn’t entirely translate for use on this theme, but I think I have gotten the bulk of things for you with the following. You will have to upload footer-seawolf.jpg image to your media library here, get the URL and replace URL_OF_IMAGE between the quote marks with that URL.
.site-footer { background: url("URL_OF_IMAGE") no-repeat scroll 0 0 #f8f8f8; border-top: 3px solid #4e6581; margin: 7px 0 20px 0; height: 84px; padding: 1em; } .site-info a { color: #4A6395; font: 11px Arial, Helvetica, sans-serif; } .site-info { text-align: left; } .site-info a:hover { color: #3399ca; } -
Thanks for the help on this. We tend to use SSI’s for control of the footer. Is there a way to do this with WP?
Also, I hate to ask, but is there a way to delete the WordPress words at the bottom of the page?
And finally would you have any suggestions for other features to add to this blog?
-
We tend to use SSI’s for control of the footer. Is there a way to do this with WP?
Not at WordPress.com. We have some limitations on the code that can be used here for security reasons, which you can read more about in our Code support page.
Also, I hate to ask, but is there a way to delete the WordPress words at the bottom of the page?
The WordPress.com and Theme credits have to remain in place and readable here at WordPress.com per the Terms of Service (#11). It can however be restyled using CSS to better fit with your design. I noticed you have your logo in the footer right now and the credits are over the top of it. If you add the following, it will right align the credits so they are not over the image.
.site-info { text-align: right; }I took a quick look at http://www.sonoma.edu/ and see there is some text to the left of the image in the footer. If you wish to add some text there, just let me know and I would be glad to help add that via CSS. There are some limitations due to the way we have to add it, but I can certainly see what I can do.
-
Thanks, I understand about the WordPress language being necessary.
Here is want needs to added to the right of the Seawolf logo.Sonoma State University, University Affairs
707-664-2122 * 1801 E. Cotati Ave. * Rohnert Park, CA 94928
The California State University System * COPLAC * College Portrait -
This is about the best I can do with CSS only. On 800px and wider screens/windows, things are aligned to the left by the image. On screens/windows 799px and narrower, it is right aligned below the WordPress credits. The 799px rule is needed to keep the text from overlaying the other elements in the footer on narrower screens. See what you think.
@media screen and (min-width: 800px) { .site-info:before { content:"Sonoma State University, University Affairs"; float: left; width: 310px; text-align: left; margin-left: 210px; display: block; color: #000; } .site-info:after { content:"707-664-2122 * 1801 E. Cotati Ave. • Rohnert Park, CA 94928"; display: block; float: left; color: #000; margin-left: 210px !important; text-align: left; } } @media screen and (max-width: 799px) { .site-info:before { content:"Sonoma State University, University Affairs 707-664-2122 • 1801 E. Cotati Ave. • Rohnert Park, CA 94928"; display: block; width: 250px; position: absolute; right: 15px; top: 30px; color: #000; } .site-footer { position: relative; } } -
HI, This is starting to work though I may need to make some tweaks. And some links are going to be needed if that is possible. I am gathering those now.
The mobile interface is awful. Can you help?
Thanks, Jean
-
Jean, can you explain what is awful about the media interface? I see a couple of things, but want to make sure I know your concerns.
Here is one fix for the dark colored sections overlaying the slider at 640px and narrower. It takes it to translucent white instead of black.
@media screen and (max-width: 640px) { #featured-content .featured-post-content .entry-header .entry-categories .cat-links, #featured-content .featured-post-content .entry-meta, #featured-content .featured-post-content .entry-title, #featured-content .featured-post-content .entry-summary { background: rgba(255, 255, 255, 0.6); } }On the gap a the bottom of the header image on smaller devices, we can try and reduce that with multiple media queries, targeting the normal widths (800, 768, 600, 480 and 320), or we can remove the background sizing declarations and the image will no longer resize with screen/window size.
-
Sacred Path, the fix helps the slide show
problem but the other issues are:1. Gap under header. We would like to keep there resizing capability so media multiple media queries sounds like a good approach if it will suit most mobile screens.
2. Menu has been lost. Can it be made to show? Just see the word Menu.
Thanks so much, Jean
-
Jean, at a predetermined point, the menu will switch to the touch device menu. The regular menu, in most instances, becomes cluttered and hard to operate on touch devices, and in some instances can’t be operated at all, especially down at phone size. On your phone if you tap Menu, your menu will open and you can navigate to anything that is on the menu.
I’ll work on #1 for you.
-
Jean, paste the following at the very bottom of your custom CSS and give things a try.
@media screen and (max-width: 900px) { #masthead { min-height: 420px; } } @media screen and (max-width: 800px) { #masthead { min-height: 370px; } } @media screen and (max-width: 768px) { #masthead { min-height: 350px; } } @media screen and (max-width: 600px) { #masthead { min-height: 280px; } } @media screen and (max-width: 480px) { #masthead { min-height: 220px; } } -
Hi, I need to get the following footer with links implemented (links between parentheses). And I am not sure how the line breaks work.
How do I do that? Thanks for the help.
Sonoma State University, University Affairs
707.664.2122 • 1801 East Cotati Ave • Rohnert Park, CA 94928
Contact (http://www.sonoma.edu/about/contact.html) • Website Feedback (http://www.sonoma.edu/problem_report.shtml) • Download Plugins (http://www.sonoma.edu/about/plugins.html) •
The California State University (http://www.calstate.edu) • COPLAC (http://www.coplac.org) • College Portrait (http://www.collegeportraits.org/CA/SSU/) -
Jean, CSS HTML text links cannot be added with CSS. CSS is a styling document used by browsers to position and style the different elements of a web page, and with that much text, I would suggest against trying to use the :before or :after pseudo selectors with a content declaration. Line breaks do not work in content declarations either, so that presents a problem.
My only suggestion on this would be to add all of that to a text widget in the sidebar. It is difficult to position it at the bottom of the sidebar area though. Here are some support documents on text widgets.
- The topic ‘Extending header in Sight theme’ is closed to new replies.
WordPress.com Forums 