I'm working on our company website. We want to make our logo image change, by changing website's language.
this is where our logo code located inside < header > tag:
<nav id="nav" class="menu-btn-parent">
<a href="/" class="logo"><h1>
<img src="<?php echo get_template_directory_uri()?>/assets/img/common/logo-small.png">
</h1></a>
</nav>
How can I make /assets/img/common/logo-small.png image to change by changing website language from mysiteurl/en to mysiteurl/de ?
We are using wordpress.
Thank you.
We are using qTranslate plugin.
add this in your css
.l-header #nav .logo h1{background: none!important;}
.l-header #nav .logo img{opacity:1!important;}
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 have a navbar.php that is called in the index.php.
The navbar looks and works fine but in one of the tabs I just have the word Logo and I wanted to replace it with an actual image. Just like many websites have it. I've seen many people using bootstrap however I'm not familiar with that at all. What is wrong with the PHP and CSS I'm trying to use?
Path of navbar.php
project/file.css
Path of image.png
project/img/image.png
navbar.php
<div class="navbar">
<a class="logo" href="#" img src="img/image.png"></a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
style.css
/*Logo*/
.navbar a.logo{
display:block;
width: 300px;
height: 200px;
background: url(img/image.png) 0 0 no-repeat;
}
Your problem with the HTML markup is here
<a class="logo" href="#" img src="img/image.png"></a>
By the above markup, you are saying that a hyperlink should be an image or should act as an image or something like that. This doesn't make sense.
What you can do is you can visit this website:
http://www.icons8.com and search your icons accordingly. You can also download it and store it in your system folder.
Once you have done this, you can write the above code as follows:
<div class="navbar">
<a class="logo" href="#"><span><img src="yourImgURLHere"/></span> </a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
Hope this helps.
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 developing a site in Wordpress. I am using a transparent .png image for the site logo, floating it over the header and navbar. Locally, everything worked fine. But once I uploaded the theme to a live site (hosted by GoDaddy), the logo disappeared. I am using a child of Twenty Thirteen, and placed the logo over the header and nav bar by floating it in the header.php file on a div tag.
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="logo"></div>
The CSS code:
#logo {
position: absolute;
top: 15px;
bottom: 0;
left: 30px;
width: 203px;
height: 201px;
background: transparent url(images/dcm_logo.png) bottom right no-repeat;
z-index:1000;
No image appears. However, when I mouse over the area where it should be, I get a change in content in the status bar at the bottom of the browser. It's like the image SHOULD be there, but its invisible. I tried putting other images in its place in the CSS (just dropping other image names in that were in the folder with it, not changing the file path) and the images showed normally, even .png transparencies. I have verified that the logo images are true .pngs, and not misnamed Photoshop files or something like that.
I'd like to emphasize the point that this all worked when I hosted the site locally via xampp, and this problem did not manifest until I moved everything to GoDaddy. All other images work normally.
Can anyone help me sort this out? Thanks
Maybe it's a problem with image links. Try url(/images/dcm_logo.png) or url(../images/dcm_logo.png). See if the image appears. Check also if the file name is spelled correctly. Have you tried to load image on servers again?