Spec. page-width, Sponsors and Logo padding
-
Hi!
I’m really close to the finish line regarding my site, but I could really need some assistance in figuring out these last issues.1. “Specific page width” – I would like my Homepage to be 1036px while the rest of the site is 936x. Seems really easy but i havent been able to figure it out.
2. The site logo has a large amount of padding around it, causing it to cover both the social media icons and searchfield in a rectangle to the right. I’ve done an insane amount of tweaking with the menu to get it fixed, smaller and still visible on mobile sites. So i suspect the themes “click-area” is still the same. Any attempts to change margin, padding etc. havent worked. Its my only option to reduce the padding, since the site header image function, moves around too much when you use position: relative. Any solutions?
3. Sponsors – Since the theme has no footer.widget.area ive had to use three text-html widgets at the bottom of the site to show sponsor links. As you can imagine, Its a bit of a hassle to set a specific margin to keep them at the bottom of the site everytime I update, columns get longer etc.
1. Is there any way to set a fixed margin to the bottom of the screen so that it remains in the same position regardless of page length?
2. A background to all 3 of the sponsor categories would be great. Ive managed to set a background individually on all of them but there is still always a bit of blank space between them because of the widget areas. Any chance of some css that could make this space as little as possible?The blog I need help with is: (visible only to logged in users)
-
Sponsor links are against the terms of service here: they are ads. They must be removed or your blog will be suspended.
-
Hi there,
1. “Specific page width” – I would like my Homepage to be 1036px while the rest of the site is 936x. Seems really easy but i havent been able to figure it out.
We can use the home page specific body selector (found in the opening body tag) to target the home page only like this
.home .container { max-width: 1036px; }2. The site logo has a large amount of padding around it, causing it to cover both the social media icons and searchfield in a rectangle to the right. I’ve done an insane amount of tweaking with the menu to get it fixed, smaller and still visible on mobile sites. So i suspect the themes “click-area” is still the same. Any attempts to change margin, padding etc. havent worked. Its my only option to reduce the padding, since the site header image function, moves around too much when you use position: relative. Any solutions?
I’m not seeing a site logo on your site right now. It looks like you moved it into an image widget at the top of the sidebar along with the social icons. Is that where you have decided to put it for now? If you would rather have the logo in the normal place above the content, we would be happy to help you adjust things so that you don’t have any collisions between the elements.
Since Massive Press is a responsive design, you don’t really need to have the mobile menu activated at Appearance > Mobile. You might want to try deactivating it and then viewing your site on a tablet and phone to see if that isn’t a better solution.
3. Sponsors – Since the theme has no footer.widget.area ive had to use three text-html widgets at the bottom of the site to show sponsor links. As you can imagine, Its a bit of a hassle to set a specific margin to keep them at the bottom of the site everytime I update, columns get longer etc.
You might want to contact our ToS department on your sponsor links, but given the nature of your website, I don’t think there is any issue, but it would be best to run it past our ToS team.
3.1 On Massive Press, given that all three columns on the main page are essentially widget areas, getting your bottom widgets to stay at the very bottom, and flow and move with the other elements in the page as things are added or removed, would be difficult. We could use a media query and limit that change to window/screen widths wider than the width where your site changes to a single column for the front page and then let everything go back to the original positions when narrower. Although this can be achieved, it will most likely take some editing as you add and/or remove things from either of the main columns on the home page.
3.2 A background to all 3 of the sponsor categories would be great. Ive managed to set a background individually on all of them but there is still always a bit of blank space between them because of the widget areas. Any chance of some css that could make this space as little as possible?
You can try this for the center/right and if that works for you. If this works for you, you can add the CSS rules for the other text widget to this media query and then use the ones below as a guide. 19.4% width seems good for the one on the left.
@media screen and (min-width: 768px) { #text-24 { background: lightblue; bottom: 0; margin-top: 133px; min-height: 219px; position: absolute; width: 50%; } #text-24 > h3 { background: lightblue; border-bottom: medium none #000; border-left: medium none; border-right: medium none; border-style: none; color: #000; } #text-25 { background: lightblue; bottom: 0; margin-top: 32px; min-height: 219px; position: absolute; right: 3px; width: 50%; } #text-25 > h3 { background: lightblue; border-bottom: medium none #000; border-left: medium none; border-right: medium none; border-style: none; color: #000; } #featured-posts-3 { margin-bottom: 300px; } } -
Appreciate it sacred! Always giving good answers.
1. The home.container code worked just fine
2. (Logo padding): I’ve added a logo so you can see what i mean with the “click-area”
3. Appreciate you understanding and taking the time to read about the nature of the site. We see no economic gain from sponsors and are a non-profit organisation. Its more of a token of gratitude from our side to display them in some format. However Ill make sure to contact your ToS.dep to solve any potential issues.
4. The code you provided solves the background issue but by experimenting a bit with i. However, I can see it being too much of a hassle in the future with potential changes. Im quite content with the site and i wont lose sleep over how the widgets look now :)
5. I would however like to ask you one last question about what i call “non-wp.com design functions”. When creating the site, i found myself using a lot of little tricks to create a more appealing visual impact by creating new pages, posts or media links to give an effect of a more dynamic site. Ex. An entire page displaying 150 movies of different genres, would have several hidden pages with category links. A user would then click the links and get a new page with x genre and the rest of the movies underneath.
To summarize: Are there any tricks using portfolios, css, links etc. that could give cool effect (popups with texts, moving information around on the same page depending on links). Im not asking for any specifics thing but any links to forum posts, tricks or ideas that have these kind of effects are very welcomed.
Once again, thank you for the help sacred and keep up the good work!
-
Logo: the following will take care of the issue of it blocking the social links.
.site-header .middle .site-title { line-height: 0.5em; max-height: 100px; max-width: 200px; }You can look into CSS animations and some of the other CSS3 things such as transform and transitions. You will have to play with them a bit. There are some of the more amazing CSS3 things that are not yet solid enough (still in draft) that are not supported here yet. Popups generally require some HTML, at least, and there are some limitations on HTML here.
You can also use the CSS body classes to more specifically target CSS to only certain pages (by page/post id) or by page type (page, category, tag). You can view source on some of your pages and posts and then look in the opening body HTML tag and see all the different CSS classes.
- The topic ‘Spec. page-width, Sponsors and Logo padding’ is closed to new replies.
WordPress.com Forums 