I apologize in advance if this question has already been answered but I'm having the hardest time making my logo linkable here: http://testsite.brentthelendesign.com/. This is a WordPress "Skeleton" based site. Any help would be greatly appreciated! The code is below.
HTML
<header class="left full header-bg">
<div class="container">
<div class="container-inside left">
<div class="sixteen columns">
<h1 class="logo abs"><a href="<?php echo get_option('home'); ?>"/></a></h1>
<nav>
<?php st_navbar(); ?>
</nav>
</div>
</div>
</div><!--container-->
</header>
CSS
h1.logo {
left:50%;
margin-left:-80px;
float: none;
text-align: center;
}
h1.logo a {
background:url(images/logo.png) no-repeat;
width:181px;
height:127px;
display:block;
text-indent:-9999px;
float: none;
text-align: center;
cursor: pointer;
}
.header-bg {
height: 190px;
background: url(images/bg-header.png) repeat;
}
> using this css you can display your logo with your home url.
h1.logo {
float: none;
left: 50%;
margin-left: -80px;
text-align: center;
z-index: 10000;
}
h1.logo a img{
display:block;
}
You're template is set up to use the WP_HOME value as the link, which is configurable in the Wordpress Admin under Settings > General. You can also override this value by explicitly setting the constant values in your wp-config.php:
define('WP_HOME', 'http://example.com');
define('WP_SITEURL', 'http://example.com');
You can also just edit the template file if you want to hardcode it (which is more efficient if it's never going to change), replace <?php echo get_option('home'); ?> with your desired URL.
Can you try instead of setting your logo as a background image through css to put it here?
<h1 class="logo abs">
<a href="<?php echo get_option('home'); ?>"/>
<image src="">
</a>
</h1>
Try this and tell me how it goes.
Related
What I want:
1:
What I want is that the echo '<span class="badge bg-red">Denied</span>'; is directly under the echo '<b> '</b>'; and that the img is the full height. And if I use the <br> it puts the text under the img and not next to it. Because I need the image to be always on the left with the text next to it.
2: The second thing that I want is that there is a small line under the
echo '<b> '</b>';
echo '<a> - ' . $topic['voornaam'] . '</a>';
How it looks like now.
The code:
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"><b>Topics</b></h3>
</div><!-- /.box-header -->
<div class="box-body">
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<div id="topic">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img style="height:100%;"class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id']src="###.'/'.$topic['foto'].'"###'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '<b> '.$topic['topicnaam'].'<$####'</b>';
echo '<a> - ' . $topic['voornaam'] ####. " " . $topic['achternaam']#### . '</a>';
echo '<span style="float:right;"class="fa-stack"><span class="fa fa-comment-o fa-stack-2x"></span><strong class="fa-stack-1x" style="font-size:10px;">999</strong></span>';
echo '<span class="badge bg-red">Denied</span>';
echo '</div>';
}
?>
</div><!-- /.box-body -->
<div class="box-footer text-center">
</div><!-- /.box-footer -->
</div><!-- /.box -->
The custom css:
#topic a {
color: black;
margin-left: 1%;
}
#topic {
padding: 10px;
}
#topic i{
font-size: 2.3em;
width: 33px;
}
One of the alternatives is by using the list tag
Here is an example for your convenience:
HTML:
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
CSS:
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
Adjust it accordingly with your code. Have fun :)
First of all, there's some sintax errors at the php code in the <div class="box-body">, check it out because the compiler can throw an error.
At the css part, i would use position: relative to the DOM elements inside the <div class="topic"> and later adjust it with top, bottom, left, right (Check this out for more info about the positioning properties in css).
Also, i would set the image full height with height: 100%, but, just as a recommendation, try using height: auto, with this property the img height adjusts to the DOM and it MAYBE get a height you like(Here's some info about height property).
Finally, you could get the small line with the <u> html tag or with the css text-decoration: underline. You can see both here.
Hope this answer helps you, if it does, please vote it up so that people can get helped if needed :)
I'm currently working on an old website that was created with some old crappy WYSIWYG editor. I'm new to web-dev and still trying to get my head around positioning elements properly. My current issue is, from what I have read, using absolute positioning is BAD, but how would you change this?
So this is the old code:
<div id="wb_Text1"
style="margin:0;
padding:0;
position:absolute;
left:187px;
top:24px;
width:83px;
height:147px;
text-align:left;
z-index:1;
border:0px #C0C0C0 solid;
overflow-y:hidden;
background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>W</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>A</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>C</strong>
</span>
</div>
</div>
And what I have come up with to replace it is:
HTML
<div class="logo-ul">
<ul>
<li>W</li>
<li>A</li>
<li>C</li>
</ul>
</div>
CSS
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}
Which looks fine until you collapse the window and it falls apart :( lol.
You can see what I'm doing here http://media.wacmotorcycles.co.uk/
How should I be writing this please?
Thanks.
Try changing #logo to
#logo {
max-width: 165px;
max-height: 171px;
margin: 0.75em 0;
float: left;
}
And, .logo-ul to
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index: 24;
float: left;
}
There is nothing inherently wrong with absolute positioning. If used incorrectly, it can have unexpected results when working with responsive layouts.
In your specific case, the W A C might be better implemented as part of the logo image itself rather than text. It's not offering any semantic or SEO benefit to include the letters in a list. Short of that, this is one way to implement what I think you're after:
.logo {
height: 6rem;
padding-left: 50px;
}
.logo-letter {
display: block;
height: 2rem;
}
<div class="logo">
<span class="logo-letter">W</span>
<span class="logo-letter">A</span>
<span class="logo-letter">C</span>
</div>
I have this code HTML:
<div id="top"></div>
<div id="mid" style="display:none;">
<div class="close">INCHIDE X</div>
<p id="first_paragraph">
TEXT
</p>
</div>
This is code CSS:
#top {
margin: auto;
width: 400px;
height: 38px;
background: url(images/DESPRE-NOI.png) no-repeat;
}
body.page-id-10#top {
display:none;
}
I want to #top deactivation of the page in wordpress which has ID 10.
I tried but unfortunately does not work ... Can you tell me please what is wrong?
This is the site:
www.avocat.dac-proiect.ro/wp
Thanks in advance!
You can do something like this to give you hooks (for JavaScript or CSS) on #top depending whether or not you are on the page with ID 10.
<?php
if(is_page(10)) {
<div id="top" class="top-inactive"></div>
} else {
<div id="top" class="top-active"></div>
}
?>
You need to use a child or descendant selector:
Child body.page-id-10>#top
Descendant body.page-id-10 #top
I'm trying to build a small website that is one page with 5 stacked divs within the body. The first and second div are fine but all the divs after that(3, 4, and 5) all repeat the unique background image when the site is viewed in IE9. The site works fine in FF 20.0.1, IE10, IE 10 compatibility, and IE9 compatibility so this issues appears to only show up in IE9. I have taken everything out of the CSS and html except for just those 5 containers and find that I can't pinpoint the issue causing the background images to duplicate in the 3rd, 4th, and 5th div. I've also repeated the second div and it also duplicates the background in the second instance. If anyone has any insight as to what I am missing I would greatly appreciate it.
Also, I have played with no-repeat and other ideas I found while searching for a solution but nothing has worked for me at this point.
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
And this is the HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
Close your a tags like this <a name="SectionXXX"></a> rather than this <a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
All I can suggest with what you've posted is that you change Background-image to background-image ... but that's a long shot.
Also your <a> elements are incomplete; and the name attribute is out of date now. Use IDs instead. That is, if you want to link to one of those divs, use this:
Go to Section Five
Then just get rid of those as in the divs altogether.
Have you ever styling a wordpress header, and then found that header to ignore your CSS styling on lower-level pages? Could really use your help debugging this annoying issue -- thank you in advance!!
I'm creating a simple portfolio site for a friend here: http://sundryspirit.com/
The homepage has a global header atop the page that should be present on every page of the site:
<div id="header">
<div id="header-top">
<div id="logo">
<a href="<?php bloginfo('url'); ?>">
<h1>Sundry & Spirit</h1>
<h2>Burning Man Apparel</h2>
</a>
</div>
<div id="mainNav">
<?php wp_nav_menu(); ?>
</div>
</div>
</div>
And I've thrown some basic styling on this header for now, in the style.css file:
#header {
width: 100%;
height: auto;
background: #e1e1e1;
opacity: 0.75;
margin: 0 auto;
max-width: 960px;
}
#header-top {
height: 50px;
margin: 10px;
position: relative;
padding: 10px;
text-align: center;
}
HERE'S THE ANNOYING ISSUE: The basic header styling is not carrying over onto other pages, like http://sundryspirit.com/gallery/
How can that be if the header it just coming from a header.php file?! Thanks for your help -- my inexperience here is just driving me nutty.
You are using a relative URL to link to your stylesheet:
<link rel="stylesheet" href="wp-content/themes/sundry/style.css" />
Change it to an absolute URL:
<link rel="stylesheet" href="/wp-content/themes/sundry/style.css" />
^
or use get_stylesheet.