Please help me fix or solve a problem regarding the positioning of the sidebar. I have a Wordpress with the Constructor theme in a one right sidebar layout. The webpage can be seen in the following links. (One has a tall head menu the other has a short. The height of the side menu is varied too.)
http://salvavita.hu/web_2012/
http://salvavita.hu/web_2012/?page_id=119
The html structure is as follows:
<div class="wrapper" id="wrapcontent">
<div class="box shadow opacity layout-right" id="content">
<div id="container">
content stuff
</div><!-- id='container' -->
<aside id="sidebar">
sidebar stuff
</aside>
</div><!-- id='content' -->
</div><!-- id='wrapcontent' -->
For some reason the side menu is broken to a new line and pressed to the left, outside the container. You can see it on top of the footer. How can I force the sidebar to be rendered in the same line as the content? (So it sticks to the bottom of the top red part of the site.)
Pure css would be preferred. At this point, it is OK if it spills out of the content to the right. (Position fixed is no good, because there are two types of header heights, and it has to work with a restored down window too.)
In theory, the layout is:
Width: 968px
Sidebar width:220px
Extra sidebar width:120px (not used)
Header height: 518px (has a custom coded short variant)
Thank you for the help,
Sziro
Alan Jenkins is right, if you change the width of #sidebar from 216px to 208px then the sidebar works Ok. What you've done with the big righthand margin on the main container and the negative lefthand margin on sidebar seems a bit weird to me. If it was me I'd probably do something more like;
.layout-right #container {
/* (Line 197 remove the following rule) */
margin-right: 220px
}
.layout-right #sidebar {
/* (Line 202 remove the following rule) */
margin-left: -220px;
}
#sidebar {
/* (Line 208 reduce the width slightly and change the float from left to right) */
width: 208px;
float: right;
}
Related
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
I have a blog page that includes an archive.
To display the archive I have used:
<div class="archive-title">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' );?>
</div>
I have created a sidebar with
<div id="sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('blog-sidebar') ) :
endif; ?>
</ul>
</div>
..and added widgets to display the categories and archive links in the sidebar.
The issue is that on the archive posts page the main background of the posts is white and the sidebar is a dark blue.
I need the colour of the link on the sidebar to be white, but now it just shows an empty bulleted list (because the text is white) above the posts.
I can not change the colour of the .archive-title li a on the main page without changing it on the sidebar as well. I also can not hide it without hiding it on the sidebar.
You can see the issue here:
http://lumency.co/2019/03/
You will notice blank bullet points with no text above the posts.
How do I change the colour above the posts without affecting the colour on the sidebar as well?
Please let me know if you need any other info. Thanks!
It might be helpfull to mention that you are using WordPress...
Do you have access to change css? My advice would then be to add a class to the list under the title .mainlist and use css like this
.mainlist li a { /* change the style of the list under the title*/
color: black;
}
.sidebar li a { /* change the style of the s*/
color: white;
}
note: you are putting li tags into a div tag and it's a mistake. because li tags most only be child of a ul tag.
and for change .archive-title li a colors use below code.
.archive-title > li > a { color: #666666; }
Thanks for all the suggestions!
I added an in my sidebar which helped me style it.
I also removed the from my archive page, which was what was actually causing all the issues because I had no idea why it was adding a list there making me unable to style it. Haha, ooops!
I'm building a site using Wordpress and I'm adding an email link in my footer. The color of the link text is now grey rather than white and won't change. I have the site built also as a stand along front-end site and this code works but it won't work on the wordpress version -
footer.php
<div class="col-md-6">
<div id="email">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/footer_logo.png" style="width: 150px; height: 50px; margin-bottom: 20px;">
<p>Email: hello#havoccreative.com</br>+971 (0)55 151 0491 or +971 (0)55 282 2114
</br>PO Box 769558, twofour54, Abu Dhabi</p>
<p>This website was design by us *pause for applause*</br> and built with his bare hands by Michael Whitehead.</br> © Havoc Creative 2017</p>
</div>
</div>
style.css
footer #link a:link, a:hover {
color: inherit;
}
I've tried it a few different ways with the id at the end of the stye rule etc but still nothing. Not sure why the rule will apply in a standalone site but not on wordpress. I've also tried !important but still nothing. It needs to be white text like the rest of the footer text.
Your CSS is incorrect. It's basically targeting all <a> elements inside an element with ID link, inside footer elements, and also any <a> elements being hovered over. The problem is nothing to do with WordPress.
I'd replace your CSS with something simple like this:
footer #link, footer #link:hover { color: #ffffff; }
The default footer widget in the responsive theme is 1/3 of the total screen width. How can I make it wider to 100%?
you can find footer.php file inside http://domain.com/wp-content/themes/yourtheme directory.
in it you can find similar lines beginning with
<!--start footer-->
<footer id="footer">
there you'll find <div class="something"> tags.
If you know what you're doing, change the class of the div.
Always keep a backup :)
Adding the following to the CSS style in the theme options solved it for me:
#home_widget_1.col-300 {
width: 100%;
margin: 0;
}
We had a bad experience with a developer not sticking to timelines and what-not so we had to drop them. That being said, we're completing the site on our own and only have a few items left. One of which is a JQuery based navigation toggle that he made... it works fine for the main level of items but when you get into sub menu items, it stops using the appropriate CSS. I'm thinking this is a basic "add this to CSS" answer, but I'm not versed in CSS well enough to figure it out.
The CSS and what I think is the JS calling it can be seen here: http://jsfiddle.net/C8vwJ/
The issue can be seen here: http://74.124.14.50/connecting-point/outreach/ (note the + "toggle open" graphic on the sub-item beneath "Outreach" is on the "Y" of "BeYond"... so it's not being CSS'd to the right as it should be.
Any ideas? Thanks for looking.
Add this line into your CSS file.
.widget-area .current_page_item .page_item .toggle { right: 0; }
Trouble in these lines of css code - style.css line 1291:
.widget-area .current-menu-item .toggle, .widget-area .current_page_item .toggle {
right: 10em;
}
If I try to change this value both '+' link and '-' link moving. Try to brake these properties. I tried to do
<div class="toggle" style="right: 0pt;"></div>
(this can be applied by classname, not inline css)