I have a simple blog on wordpress http://heather.stevenspiel.com/ and I'm trying to make the header title to be a link to the homepage. I went into header.php and rewrote the script for that part, but still can't get a link to work.
This is what I re-wrote:
<h1>
My Spiel
<br/>
</h1>
I know that the href is being registered because of the css color change.
This is what the previous code was:
<h1>
<?php
if ($balloons_option['balloons_site-title_line1'] == '' && $balloons_option['balloons_site-title_line2'] == '') { ?>
This is a<br />
WordPress theme
<?php } else {
echo $balloons_option['balloons_site-title_line1']; ?><br />
<?php echo $balloons_option['balloons_site-title_line2'];
} ?>
</h1>
I originally tried putting the href outside the h1, but still no luck.
Is there some buried Wordpress setting that disables a clickable title? Or is there some javascript that I should be looking out for that is disabling it?
I should also note the css for the header contains a z-index. I read somewhere that it might be effected by that:
#header .content {
line-height: 18px;
margin: 0;
z-index: 4;
}
If the z-index is effecting it, why is that?
Change z-index property on line 37 of layout.css to
#header h1 {
position: relative;
z-index: 10; /* Was 2 */
}
Your .entry (z-index:4) div goes vertically from top to bottom covering your #header with a higher z-index than your h1 z-index (2). So your h1/Anchor wsa unclickable because it was "under" another div.
Related
Brand new to coding, just started the META Back-End Certificate on Coursera, and I am having trouble with one of the quizzes. We are provided the HTML, and then we have to write CSS to meet certain criteria. I have listed the Prompt, HTML, CSS, and errors below:
Prompt:
"
Open the styles.css file.
Add a CSS rule for the body element that sets the background color to #E0E0E2.
Add a CSS rule for the h1 element that sets the text color to: #721817.
Add a CSS rule for the h2 element that sets the text color to: #721817.
Add a CSS rule for the center-text CSS class that aligns the text to center.
Add a CSS rule for the HTML element with the id logo. Set its left and right margins to auto and changes its display to a block element.
Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.
Add a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em."
HTML Code that was provided for the quiz:
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="logo.png" id="logo">
</div>
<div class="center-text">
<h1>Our Menu</h1>
<h2>Falafel <span>NEW</span></h2>
<p>Chickpea, herbs, spices.</p>
<h2>Pasta Salad</h2>
<p>Pasta, vegetables, mozzarella.</p>
<h2>Fried Calamari</h2>
<p>Squid, buttermilk.</p>
</div>
<div class="center-text">
<p id="copyright">
Copyright Little Lemon
</p>
</div>
</body>
</html>
"
CSS code that I wrote:
body {
background-color: #E0E0E2;
}
h1 {
color: #721817;
}
h2 {
color: #721817;
}
.center-text{
text-align: center;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
span {
color: #fa9f42;
font-size: 0.75em;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
When I submit, the autograder on Coursera is returning the two error messages:
"Failed - ✗ The 'NEW' labels within tags should have a color of '#fa9f42' (+ 1 related test)"
"Failed - ✗ The element with the ID 'copyright' should have a font-size of 0.75em"
I am not sure why these two tests are coming up as failed, as it appears that the webpage view reflects that the 'copyright' font size is correct, and that the 'NEW' labels within do in fact have that color. Any ideas why this is coming up as wrong?
Thanks anyone and everyone!
The second to last prompt asks to modify span elements that are children of h2 elements, however, your code modifies all span elements.
To fix this, change
span {
color: #fa9f42;
font-size: 0.75em;
}
to
h2 > span {
color: #fa9f42;
font-size: 0.75em;
}
This small change requires all spans to be children of an h2 element in order to be modified, thus, fulfilling the request of the second to last prompt.
Solution: Followed solution provided by accepted answer.
Excerpt of my code provided below as a clearer solution.
<?php
$active_home = "active";
include('header.php');
?>
<div id="content">
<title>Welcome to the home page.</title>
<p>index</p>
</div>
The $active_home must come before the include in order to affect the header file.
<html>
<head>
<link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>
</head>
<div class="topnav" id="mytopnav">
Home
</div>
</html>
Currently I have a main CSS sheet, which specifies all the styles of my navigation bar.
I want to provide an indication as to what page the user is on, and the tutorial I followed makes use of a ".active" class which changes the background and text colour.
The trouble is that their method has the active page specified on the navbar. This doesn't work, as what the navbar considers to be the active page never changes.
What I am attempting to do, is add a small style sheet at the start of each page which sets the current page on the nav bar to active.
I can do this very easily if I use something like
<style>
#homenav{
background-color: #4CAF50;
}
</style>
To each page, in the above example the home page.
However, this means that if I want to update the style for the active page, I need to change each page individually.
What I'd rather do is something like
<style>
#homenav{
(add the .active class)
}
</style>
Which makes life easier, however at the moment I am having issues referencing.
Is it possible in CSS to add a class to a particular ID? Failing that, is there a way to declare a variable in the main css that can be referred to in other style sheets?
Main CSS:
* {
margin: 0;
}
#body{
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
In your current case scenario, you have dynamic pages where you want to highlight the menu in navbar related to the active page. It can be simply achieved using the below logic.
In case you have fixed number of dynamic pages
Let's take an example that you have the below navigation bar (menu) items.
Home
About
Services
Contact
In every page, you have dynamic content. What you require will be accomplished with PHP and NOT by HTML/CSS.
Have your Navigation Bar file as a separate file. Name it as you want. For example, nav-items.php and include in your PHP pages.
Now in nav-items.php apply the below logic:
<li id="home" class="<?php echo $active_home; ?>">Home</li>
<li id="about" class="<?php echo $active_about; ?>">About</li>
<li id="services" class="<?php echo $active_services; ?>">Services</li>
<li id="contact" class="<?php echo $active_contact; ?>">Contact</li>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
?>
<li id="<?php echo $dynamic_page_name; ?>" class="<?php echo ${"active_" . $dynamic_page_name}; ?>"><?php echo $dynamic_page_name; ?></li> //Since it is an example of dynamic page names, so I am only giving one List Item example.
Now in every PHP page, add the below code.
For example, About will have the below code:
<?php
$active_about = "active";
?>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
${"active_" . $dynamic_page_name} = "active";
?>
This will add active class to each page with their specific PHP variables defined for this purpose only. So once the nav-items.php will be loaded in each page, only the relevant page will have active class added to it.
Am developing a WordPress site using the underscores theme and I just added a widget with contact info to my site with the following code:
<div class="topheader">
<div class="info">
<?php if( is_active_sidebar( 'info' ) ) : ?>
<?php dynamic_sidebar( 'info' ); ?>
<?php endif; ?>
</div>
</div>
CSS:
.topheader {
background-color:#e6e6e6;
}
.info {
max-width: 1280px;
}
The info is the first thing that I on the page. But I see that there is a space at the top and at the bottom where my slider is located.
How can I eliminate the existing margin that I see before and after the heading?
Cause at the moment I gap, then the widget, and after the widget there is another gap and only then the slider.
I am tried to setting the header margin to 0px, but it didn't really work.
Here a screenshot
How can I eliminate the existing margin that I see before and after the heading?
By heading do you mean an H3 tag by any chance? These are default in sidebars. You should just set margin-top:0 on the H3 tags in your sidebars, to get rid of any margin pushing your sidebar down.
To counter act this, I would then add some margin-bottom to the widget block to space them out a bit.
I think that's what you mean.. but it's hard to understand without any visual representation of what your problem is.
You have to set the start values in css like this:
body, html {
margin: 0;
padding: 0;
}
Otherwise please copy the whole Code of the page here. Open it in your browser, open the site Code and copy all.
Just inspect the element and test whats causing the margin. You can try this code. This might help. But not sure because your question is not clear enough to know your code.
*{
margin: 0;
padding: 0;
}
.top-header, .info {
margin: 0;
padding: 0;
}
I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.
I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.
This is original HTML part of code I'm interested:
<!-- Nav -->
<nav id="nav">
<span>Home</span>
<span></span>
<span>Email Me</span>
<span>Twitter</span>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego Benjamín <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
And just changed:
<span>Home</span>
<article id="start" class="panel">
This are the visual changes:
What's that I'm missing or should fix?
EDIT
Right after comments I went and saw CSS file and found out:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
This is because the id me is being styled in the CSS.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.
Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.
In your stylesheet you should change all styles that contain #me to #start.
Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.
You have to change that thing in CSS file too.
The styles applied with id in the CSS, like #article-id .child{some :style; }
What you changed in the HTML may reflect the same in CSS too.
Replacing the ID broke the styles related to your #home element.
Open your CSS file, and rename all #home in #me.
This is probably happening because some elements in your CSS are targetted as shown below
#foo .bar{
}
This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.
I have my site in word pressHere is my website link. There is text above slider, when i remove it , automatically slider is going to be disappears. Can anybody help ???
Code is as follow :
<?php get_header(); ?>
<div id="page-wrap">
Front slider
<div id="front-slides">
<div class="slides_container" >
<?php echo do_shortcode( '[cycloneslider id="115"]' ); ?>
</div>
</div>
After Remove You text "Front slider", open your style.css file and
change the margin-bottom: 9px; to margin-top: 60px; for #front-slides that will fix it:
#front-slides {
position: relative;
margin-top: 60px; /* the minimum margin is 60px you, if you change to 50px, your slider will go under the menu div.. & that would makes disappear :) */
}