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
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; }
CSS
header.site-header .wrap {
background: url(http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg) right top no-repeat;
}
This is what I am working with.
Any insight would be grateful.
Here is the home.php code.
You cannot do this using CSS.
What you've done here is just passed the URL for the background.
If you want to add a link to the image, you can do this either by using a pair of anchor tags.
EG:
Add this in your HTML :
<a href='#'>
<img src="...." />
</a>
OR by adding a click event on to the div.
EG:
$(document).ready(function(){
$('header.site-header .wrap').click(function(){
window.location.href = "Link";
});
});
You could do something simpler:
<div>
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
This creates a link that is an image.
EDIT after more info came to light.
From what I've gathered so far... you're using the "Open Floor Plan" Theme for Wordpress. (Maybe ask them for support? After all you paid for a theme.)
The simple method and recommended:
That theme appears to have a widget position at the top right. Why not use that to add your banner-link?
The hard-way hacking not-recommended method:
In wordpress you can edit the theme files (not recommended) by going to Appearance then Editor. This will open up the theme editor view and on the right side you'll see all the files of the currently active theme. You then could search those files for the HTML tag and add the above modifications.
The file that could have what you're looking for could be the header.php or index.php, but if it isn't there just sift through the other files until you find it.
The html markup would look something like this:
<header class="site-header">
<div class="wrap">
It will contain more stuff in here...
</div>
</header>
It will probably contain a lot more classes and PHP code...
The Widget Method
Add your banner code in a Text widget. You can add the CSS styling in-line, so that you won't have to upload anything else.
Add the CSS property for the parent container:
<style>header.site-header .wrap { position:relative; }
Then add the CSS for your element:
.mybanner { position:absolute; top:0; right:0; z-index:1; }
/* the widget with the social icons will probably need z-index aswell */
.CLASS-of-other-widget { position:relative; z-index:2; }
</style>
Now add your HTML code:
<div class="mybanner">
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
Please note that with the z-index, the other widget will cover the banner and the ability to click it. You could simply use another position for that widget and just have the banner there.
Hi all and thank you for the help.
I have found a solution. I left the image on the BG, then added a widget to the top right of the page where the image (banner sits), then added a text box to the widget area and added this
<div class="topbanner" onclick="window.location='http://jadeluxurycondos.com/jadeluxurycondos-new/jade-signature/'" style=" height: 102px;left: 37.5%;position: absolute;top: 0; margin-top: 32px;width: 585px;cursor: pointer;"><div>
The image appears to be clickable. Check here to see it in action.
I am trying to achieve a custom layout for my featured article page on Joomla in order to make a nice blog layout with my custom design made on Photoshop.
This is the look I am trying to achieve: http://i48.tinypic.com/2ztbx54.png
This is the look I am getting at the moment: http://i49.tinypic.com/1ibn5w.png
Rest of the layout would not be a problem since it's pretty easily modifiable, however, the problem where I am stuck at the moment is the intro image. I want it to be on the left from the article title, some information and intro text like shown in the first image.
Is it possible to extract the image out of intro text in order to place it where needed?
Help will be appreciated, thanks!
Firstly, my comment was just a joke.
Now, for the question: your image is sitting in the div item column-1 when it should be sitting in the the div above that (the container of item column-1) which is items-row cols-1 row-0.
So this:
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
Cannot go in <div class="items-row cols-1 row-0"> or <dl class="article-info"> which is what you are currently doing.
It needs to be sitting in the outer div. So it should be in <div class="items-row cols-1 row-0">. So like this:
<div class="items-row cols-1 row-0">
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
//...and the rest of your stuff
In your css file add the following code to get you started off:
.article-info {
float:right;
}
h2 {
text-align: right;
}
.item.column-1 img {
margin-top: -50px;
}
.article-info-term {
padding-left: 40px;
}
Also, take away the margin: 0px; you have added to the images.
This is what the result will be:
http://i735.photobucket.com/albums/ww355/lodder16/stack_image.png
Hope this helps