I have css class as "brands" now I need change size of thumbnail div in brand class how can I do this?
<div class="brands">
<div class="row">
<?php foreach ($item['brands'] as $key => $value): ?>
<div class="col-md-3">
<div class="thumbnail">
<img src="<?php echo base_url(); ?>assets/img/logos/<?php echo sprintf("%s-logo.jpg", $value); ?>" alt="<?php echo sprintf('%s Logo Image', ucwords($value)); ?>" />
</div>
</div>
<?php endforeach; ?>
</div>
</div>
you can add this code in css files:
.thumbnail {width: 100%;}
This will overwrite only .thumbnails elements inside .brands class
.brands .thumbnail {
width: yourWidth;
height: youtHeight;
}
Related
The page contents floats left initially and when scrolled down it displays in the center of the page.
Please see https://buckbaaz.com/category/photography/
I could not find out the CSS issue
Any help?
Code
<div class="col-md-12 text-center pad20">
<h1>Category : <?php the_category(', '); ?></h1>
</div>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<h2><?php echo the_title(); ?></h2>
<?php
if (is_category( $category = 'Photography' ) ) {
if(has_post_thumbnail()){
echo '<div class="postthumb">';
the_post_thumbnail('thumbnail');
echo '</div>';
}
}
?>
</div>
<?php
endwhile;
// Archive doesn't exist:
else :
esc_html__( 'Nothing found, sorry.','north' );
endif;
vntd_pagination();
?>
</div>
</div>
Make your page-content DIV full width:
#page-content {
overflow: hidden;
position: relative;
width: 100%;
}
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;
}
I have this site:
http://test.dac-proiect.ro/wp/
I want to make this change
http://i61.tinypic.com/296f3g4.png
Code HTML:
<div id="main">
<div id="linie">
<div id="logo-theme">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo get_template_directory_uri() . '/img/LOGO.png'; ?>" alt="<?php bloginfo( 'name' ); ?>" />
</a>
</div>
<div id="text-logo">
<h1>CABINET AVOCAT CODOBAN</h1>
</div>
<div id="square">
</div>
</div>
</div>
Code CSS:
#square
{
width:200px;
height:200px;
background:url(img/BODY-CONTACT.png)
}
#linie
{
display:inline-block;
}
#logo-theme{margin-top:200px;class="img-responsive" display:inline-block; margin-right:10px;}
#text-logo{text-transform:uppercase;font-size:15px;color:#fff;margin-top:30px;}
We found some examples on the internet and I tried but did not work ... Can you help me solve this problem?
Thanks in advance!
Apply these css on your #square:
position: absolute;
right: 0;
top: 200px;
I'm working on a new webpage for my blog # http://bornsquishy.ca
I'm also trying to use a grid system by http://gridiculo.us/
The problem that I'm having is the div class "grid" is being closed off at the end of the header without a closing div tag, and I can't seem to figure out why this is happening.
Here is the code from the header.php after the closing head tag:
<body <?php body_class(); ?>>
<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="grid">
<div class="row">
<div class="c3">
<div class="logo">
<?php if(of_get_option('logo_type') == 'text_logo'){?>
<?php if( is_front_page() || is_home() || is_404() ) { ?>
<h1><?php bloginfo('name'); ?></h1>
<?php } else { ?>
<h2><?php bloginfo('name'); ?></h2>
<?php } ?>
<?php } else { ?>
<?php if(of_get_option('logo_url') != ''){ ?>
<img src="<?php echo of_get_option('logo_url', "" ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } ?>
<?php } ?>
</div><!-- .logo -->
</div><!-- .c3 -->
<div class="c8">
<nav class="primary">
<div class="menu-holder">
<div class="menu-left">
<div class="menu-right">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</div><!--.menu-right-->
</div><!--.menu-left-->
</div><!--.menu-holder-->
</nav><!--.primary-->
</div><!--.c8-->
<div class="c1 end">
<div id="rss-feed">
<img src="/images/rss-logo.png">
</div><!--.rss-feed-->
</div><!-- .c1 end-->
</div><!-- .row -->
<div class="row">
<div class="c8">
<div class="title">
<img src="/images/title.png">
</div><!--.title-->
</div><!--.c8-->
<div class="c4 end">
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
<!-- Widgetized Header -->
<?php endif ?>
</div><!--#widget-header-->
</div><!-- .c4 end -->
</div><!-- .row -->
<!--.grid left open-->
</header>
<!--#main left open-->
Let me know if more code/info is needed to answer this question.
Your comments say <!--.grid left open-->, does this mean you want to close the div.grid element after the closing </header>? If so, you can't do that because the div was opened inside the header, so it must be closed before the header is closed. HTML elements can't "overlap" each other.
If you're using Chrome developer tools or similar to inspect the markup, the browser will have seen the error and "fixed" your HTML structure in order to display it.
You either need to put the opening div before or after the header, or close the div before the end of the header.
I have two meny=u bar in my site. 1st- top menu 2nd- primary menu.Top Menubar not working in my site.I input it from menu but not working. I use hostme theme. My site http://www.dewdropzone.asia . My topmenu bar header code. See this theme demo for understand what top menu bar not show my site . click here
<?php if(get_option("topblackmenu") == "true") { ?>
<div class="topmenu">
<div class="inner">
<!-- .top_menu -->
<?php if (has_nav_menu( 'top-menu' ) ) { wp_menu_functon(); }?>
</div>
</div>
<!-- .top_menu -->
<?php } ?>
<div class="clear"></div>
<div id="header">
<div class="inner">
<!-- logo -->
<div class="logo">
<?php if($s_logo){ ?>
<a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">
<img src="<?php echo $s_logo; ?>" alt="<?php bloginfo('name'); ?>" />
</a>
<?php } else { ?>
<a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />
</a>
<?php } ?>
</div>
<!-- logo -->
<div class="sec-menu">
<?php if (has_nav_menu( 'primary-menu' ) ) { wp_primary_menu_functon(); }
else{
echo('<ul class="nav"><li>'.__('Go to WP-admin Appearance Menus and assign menu location', 'hostme_front').'</li></ul>');
} ?>
</div>
<!-- topmenu -->
</div>
</div><!-- topbar -->
<div class="clear"></div>
I'm sorry for adding an answer, but I don't see an option to comment in the question. Am I missing something?
Did you create your navigation through the Appearance>Menus in your Dashboard?
Make sure that you select the menu you have created as your 'Header Menu'.