How set header item to right side in wordpress ?
I tried with align = "right" but didnt work.
<body <?php body_class(); ?>>
<div class="container">
<!--site-header-->
<header class="site-header">
<div class="hd_search">
<?php get_search_form(); ?>
</div>
<span>
<h1><?php bloginfo('name');?></h1> </span>
<h5> <?php bloginfo('description'); ?> <?php if(is_page('portfolio')){?>
- Thank you for viewing my work
<?php } ?> </h5>
<div class="header" >
<nav class="site-nav" align="left">
<?php
$args= array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</div>
</header>
Set header to red arctangle. Click to view picture
Actuallu this is because of <header> does not support align atrribute, just replace it with div instead. Note that html5 does no longer support align attribute, so I suggest you to use CSS instead.
For example replace this <div align="center"> with <div style="text-align:center;border:1px solid red">, for the result you need check CSS reference manual and HTML reference from w3school.com
However, the property you need is the CSS attribute float, you can simply add to your <header class="site-header"> with <header class="site-header" style="float: right">
Related
I am working on a website and using the regular theme Home page and not creating a static page. The theme (Business Elite) has a Contact Us section near the bottom of the page. The url I am working on is http://dlecpa1.com . The theme does not allow me to change the three images that are in the Contact Us section so they would have links.
I did figure out how to change the first image text line to read "CALL US" by changing it in the css under inc-front-front-function php, but that does not help me with adding links to the second and third images (circle_bg2 and circle_bg3).
I know I can't add links using css, so I tried my hand using javascript but I got lost trying. I know that I need to add js and html for the links to work but I have no clue as to how I can do this. I don't know if this helps, but this is what is in the css I found.
<!-- TOP PART -->
<ul class="cont_us_top container">
<?php if ($contact_us_name) { ?>
<!--name-->
<li>
<div class="circle" id="circle_bg1"></div>
<div><p class="cont_title"> <?php echo __('CALL US', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_name; ?> </p></div>
</li>
<?php } ?>
<?php if ($contact_us_address) { ?>
<!--address-->
<li>
<div class="circle" id="circle_bg2"></div>
<div><p class="cont_title"> <?php echo __('ADDRESS', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_address; ?> </p></div>
</li>
<?php } ?>
<?php if ($contact_us_mail && $contact_us_showmail) { ?>
<!--mail-->
<li>
<div class="circle" id="circle_bg3"></div>
<div><p class="cont_title"> <?php echo __('EMAIL', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_mail; ?> </p></div>
</li>
<?php } ?>
</ul>
<div class="right_home right_home_center">
<?php self::social_icons(); ?>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<?php
}
}
You just need to go into your CSS and look for the #circle_bg1 ID, and then change the background image to one that you want:
#circle_bg1 {
background: url(images/yournewimagelink.jpg) no-repeat center;
}
The 3 circle classes are located in your style.css doc, starting on line number 1979.
DISCLAIMER : I did not code the theme. This was made by another developer who left the project and I am making adjustments based on the new requirements. I don't have experience in Wordpress Theming but I can understand codes.
I am making a design in a website and I want to make my logo to be like floating above the Slider layer. I am working on a wordpress theme:
As you can see the Logo 'Red Dela Cruz' is on the top occupying a separate space or div. I want it inside the slider and floating on it like a layer, whenever the slide changes image, logo should still be there. Here is my code:
<div class="slider">
<img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
<div id="one-by-one-slider" class="one-by-one-slider">
<ul class="one-by-one-slider-large">
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li>
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
<div class="slider-content text-center">
<div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</div>
</div>
<div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
<div class=" container">
<div class="row">
<div class="col-md-12">
<h3><?php the_content(); ?></h3>
</div>
</div>
</div>
</div>
<!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
<div class=" container">
<div class="row">
<div class="col-md-12">
For Bookings
</div>
</div>
</div>
</div> -->
</div>
</li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
<div class="one-by-one-slider-nav">
<ul class="one-by-one-slider-thumbs">
<li class="one-by-one-slider-element"></li>
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li></li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
</div><!-- one-by-one-slider-nav -->
</div><!-- one-by-one-slider -->
</div><!-- slider -->
The logo is on the 2nd line and I haven't done any css on class
web-logo
This should work:
.web-logo {
position:absolute;
}
If the logo goes "behind" the slider, you should add a z-index, and make it higher, untill the image is showing:
.web-logo {
position:absolute;
z-index:2;
}
you can try this one:
.web-logo {
position: absolute;
right: 10px;
top: 10px;
z-index:2;
}
Building a Wordpress theme and I am not on the first page but on other pages content to have.
This is the site:
http://avocat.dac-proiect.ro
I turned off main site
.masthead-fixed .site-main {
margin-top: 48px;
display:none;
For example ... if a user clicks on "Sample Page" I want #.masthead-fixed to be activate else...not be displayed.
It can do so in CSS?
What technology can I use?
It would help me a strong example to understand more clearly what to do.
Thanks in advance!
Look at the generated HTML. Each page will have some unique classes on the body tag. For instance, the frontpage will have a .home class, and depending on template, your body tag will also have a template class, e.g. .page-template-default. Most importantly, though, is that each page will have a unique id, e.g. .page-id-7. You can easily use these to differentiate between specific pages in your CSS.
So look at the source code of your "Sample Page", find its id and adjust the CSS accordingly:
body.page-id-X .masthead-fixed .site-main {
display: none;
}
If you want something to show only when you're not on the home page you can use the following PHP in your template file.
<?php if (!is_home() || !is_front_page()) { ?>
<div id="something">This div and content will only show up if we're not on the front page</div>
<?php } ?>
So here's a standard masthead found in header.php
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="menu-label" onclick></label>
<nav id="site-navigation" class="main-navigation" role="off-canvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Change the above code to this:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if (!is_home() || !is_front_page()) { ?> <!-- PLACE THIS LINE ABOVE YOUR HEADER -->
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="menu-label" onclick></label>
<nav id="site-navigation" class="main-navigation" role="off-canvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<?php } ?> <!-- PLACE THIS CODE AFTER THE HEADER -->
<div id="content" class="site-content">
This will display your header on all pages except your home page.
I'm not sure if I should post this in wordpress stack but if you go to the single.php
on my custom wordpress theme, you'll see that if you make your browser roughly less than 1200 pixels wide, you are able to horizontally scroll to the right. There should be no extra space to allow the horizontal scroll as the page content is in a wrapper div.
I have viewed the source and it appears that the content generated by wordpress through the_content() is creating divs that break the wrapper?
Here is the code for single.php Once again when I remove <?php the_content(); ?> the structural problem is not there.
<?php get_header(); ?>
<div class="page-section clear">
<!-- post thumbnail -->
<div class="single-image-anchor">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a class="single-image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" style="background-image: url('<?php echo $image[0]; ?>')">
</a>
<?php endif; ?>
</div>
<!-- /post thumbnail -->
<div class="container clear">
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="wrapper">
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post title -->
<h1 class="single-title">
<?php the_title(); ?>
</h1>
<!-- /post title -->
<!-- post details -->
<span class="single-date"><?php the_time(get_option('date_format')); ?></span>
<div class="single-text">
<?php the_content(); ?>
<br />
<a href="<?php echo get_permalink(18); ?>" class="back-article">
<i class="fa fa-arrow-circle-left"></i> News
</a/>
</div>
</article>
<!-- /article -->
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
</div>
<?php get_footer(); ?>
it's the facebook share buttons. The span wrapping it and the iframe are currently set to a width of 900px:
<span style="vertical-align: bottom; width: 900px; height: 25px;">
<iframe name="f2a1624528" width="900px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=1526849080927795&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F7r8gQb8MIqE.js%3Fversion%3D41%23cb%3Dfa87d2a78%26domain%3Dmichaeljeromeinprogress.themichaelsanger.com%26origin%3Dhttp%253A%252F%252Fmichaeljeromeinprogress.themichaelsanger.com%252Ff291a9dcc8%26relation%3Dparent.parent&href=http%3A%2F%2Fmichaeljeromeinprogress.themichaelsanger.com%2Fnye-bte-shows-on-sale-now%2F&locale=en_US&ref=below-post&sdk=joey&share=true&width=900" style="border: none; visibility: visible; width: 900px; height: 25px;" class=""></iframe>
</span>
set them to like 100px since those buttons are small anyways.
Whenever you get problems like this, do this:
div { border: 1px solid red }
Then look at all the div blocks inside the page. Take note on the one's that are touching the right edge.
If you go into Chrome, you can delete the element node. When I deleted the fb social plugin nodes, the horizontal scroll bar went away. So look into that...
I need some help with positioning my css elements in a wordpress theme. Here is my situation.
First, I call my header. Inside my header is my horizontal nav menu.
Next, I call my slider from the index.php. The slider is created in such a way as it takes up 100% of my screen width with 0 margin-top. Doing this allows my menu to be within my slider images.
My problem is that the next element I call is place directly under my menu, but I would like it placed under my slider images. How do I do this? Do I have to give my next element a margin-top equal to the height of my slider images? Seems there is probably a better way to do this.
The slider is only used on the index page, not on any of the sub pages.
I'm thinking maybe the right answer has something to do with the position tag but I'm not having any luck getting the functionality to work.
Here is the css for my slider positioning.
.slider {
position: absolute;
top: 0px;
width: 100%;
z-index: 1500;
}
Here is my index.php file
<?php get_header();?>
<section>
<?php get_template_part('slider', 'index');?>
</section>
<section>
<div class="row">
test
</div>
</section>
<?php get_sidebar();?>
<?php get_footer();?>
Here is my header
<body>
<header>
<section>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><?php bloginfo('name');?></h1></li><li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array( 'main-menu' => 'Main Menu', 'container' => false, 'walker' => new Top_Bar_Walker(), 'menu_class' => 'right'));?>
</section>
</nav>
</div>
</section>
</header>
And here is my slider-index.php file
<div class="row full-width slider">
<div class="preloader"></div>
<ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
<?php
$args = array('category_name' => 'Featured');
$query = new WP_Query($args);
while($query->have_posts()) : $query->the_post();
?>
<li><?php the_post_thumbnail('featured');?>
<div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
</li>
<?php
endwhile;
?>
</ul>
<div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
</div>
Thanks for any help.