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!
Related
I'm trying to place a custom section in the Astra Wordpress Theme's header under a specific condition, with Custom Layouts feature, but I couldn't manage it properly. The thing is, I wanted to place the location of the featured header images in the header section with a custom icon. The thing is, I'm using the "caption" section of the Wordpress image. I can display only the caption section if it's not empty. My PHP knowledge is not perfect, but I've done the research and found nothing.
Example: top right corner
I could display the caption section of the image but couldn't place the icon before the caption text.
I've tried many combinations, but still nothing.
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="featured-image-caption-for-header"
style="position: absolute; top: 10px; right: 10px; text-align: right; font-size: 12px; color: #3A4115;">
<?php $featured_image_caption = the_post_thumbnail_caption(); if( $featured_image_caption ): ?>
<i class="uil uil-camera"> </i>
<?php echo esc_url( $featured_image_caption ); ?>
<?php endif; ?>
</div>
My main goal is to display the icon before the caption text only when the caption section of the image is filled.
Placing <i class="uil uil-camera"></i> code before the caption text in Wordpress' photo editor displays the icon but this is what I really wanted. Still working on a better solution.
Photo Editor
Output
I am looking for a rule to hide the page title of the main page but not the sub-page.
example: mysite.com/video/1
I would like to hide the page title for the "video" not for the page 1.
Can someone help me with it?
I have tried this
.entry-title {
display: none;
but this is hiding for all the pages,
Take a look at the classes you have available in the body tag. If you're theme was properly coded, there should be a function
<?php body_class(); ?>
in the body tag that gives you classes according to the page you're in. If you have those classes you can target the title adding another selector such as:
.page-child .entry-title {
display: none;
}
I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/
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;
}
Here's a piece of my navigation code:
<? if($page == ""){ ?>
<li>
Home
</li>
<? }else{ ?>
<li>
Home
</li>
<? } ?>
I want that #on to include 3 images basically:
With repeat-x. (Which is actually the #on)
Left side of the nav button.
Right side of the nav button.
I tried some solutions I found online, although none seem to work.
Is there a way to do it without wrapping each nav with 2 additional div tags?
Thanks!
There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.
You would do it like so:background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
There's some more information on that here, but as a heads-up, it's a CSS3 property only.
I think what you want are CSS Sliding Doors.