How to style the elements dynamic in iteration
In test.phtml page
<?php foreach($tests => $test) { ?>
<li class="<?php echo $test['class'] ?>">
<a href="#" title="">
Test Instance
</a>
<style type="text/css">
li.<?php echo $test['class'] ?> a:hover {
color: <?php echo $test['color'] ?>;
background-color: <?php echo $test['bgColor'] ?>;
}
</style>
</li>
<?php } ?>
Style tags are coming in page.
<li class="third-item">
<a href="#" title="">
Test Instance
</a>
<style type="text/css">
li.third-item a:hover {
color: #498995;
background-color: #dbe7ea;
}
</style>
</li>
But, these style have no effect in webpage.
Please help me to solve this problem...
You can use inline style tag like this.
<li style="color:<?php echo $test['color']; ?>;background-color: <?php echo $test['bgColor'] ?>;"><a>Test</a></li>
I have modify your code check it.
<?php foreach($tests => $test) { ?>
<style type="text/css">
li.<?php echo $test['class'] ?> a:hover {
color: <?php echo $test['color'] ?>;
background-color: <?php echo $test['bgColor'] ?>;
}
</style>
<li class="<?php echo $test['class'] ?>">
<a href="#" title="">
Test Instance
</a>
</li>
<?php } ?>
You should define internal styles in the head-section of the htmldocument. Visit http://www.w3schools.com/css/css_howto.asp.
You could use your loop to define variables both for the head-section and the later markup and echo them at the right position.
Related
I have a site with a sticky footer, which is not so sticky and I am having a hard time figuring it out.
This is the html part: html.tpl.php
<?php
?>
<!DOCTYPE html>
<head>
<?php $head; ?>
<title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
<?php if ($default_mobile_metatags): ?>
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_html5_shim and !$add_respond_js): ?>
<?php elseif ($add_html5_shim and $add_respond_js): ?>
<?php elseif ($add_respond_js): ?>
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="container">
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible
element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<?php print $page; ?>
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
</html>
And page.tpl.php part
<div id="navigation">
<?php print render($page['navigation']); ?>
</div>
<header class="header" id="header" role="banner">
<?php $front_page='http://kvf.fo/vit';
if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print
t('Heim'); ?>"
rel="home" class="header__logo" id="logo"><img src="<?php print
$logo; ?
>" alt="<?php print t('Heim'); ?>" class="header__logo-image" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
<h1 class="header__site-name" id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Heim');
?>" class="header__site-link" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div class="header__site-slogan" id="site-slogan"><?php print
$site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php print render($page['header']); ?>
</header>
<div id="main">
<?php print render($page['content']); ?>
</div>
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
The css part.
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
.container {
margin: 0 0 125px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
The page adress is www.kvf.fo/vit , and it seems to be working ok, but on an Ipad, the footer "sinks" halfway under the bottom of the screen, which is a bummer because the main users to the site, are Ipad users :/
Any help is much obliged!
If you want your footer to be sticky so add this property in its css
footer {
position: fixed;
}
It seems you're closing the body tag to early:
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm facing logo and menu bar alignment no my website.
how can i fix it? sharing images below.
I want to make changes as below image..
What HTML or CSS code that I should Write ?
Continuing our discussion from wordpress.stackexchange.com here and here, if I get it right, what you are trying to do is having the same menu you have when you resize the browser's window size to 1180px, where the logo goes to the center, but instead of having this only when you resize the window to 1180px, you want to have this type of disposal at all time, meaning having the 1180px menu as the site's default menu.
First
So in order to do this, we need to remove the current CSS for the default menu when the screen size is bigger than > 1180px. To do this, go to - style.css:1006 (meaning go to the file style.css line 1006), and remove the following CSS:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#site-branding {
width: 20%;
padding-bottom: 5px;
min-height: 60px;
}
Second
Next thing we need to set the style for the menu when it gets at 1180px as the new default menu. In order to do this, go to: - responsive.css:48, an remove the media queries around the code, which currently the code it's something like this:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1
#media (max-width: 1180px) {
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
}
And you need to remove the #media query or just put the code outside the #media query, to be only like this:
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
Third and last
At last, fix the menu centering disposal, go to - style.css:4328 and remove the float:right; property from the id #menu:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#menu {
float: right; /* <- REMOVE THIS LINE */
position: relative;
height: 100%;
}
With this being done, the supposed menu from the size 1180px will now become the main default menu. Good luck! :)
Use this CSS for the logo:
.site-logo {
position: absolute;
top:-55px;
left:50%;
margin-left: -150px;
}
You'll want to move the following HTML,
<a class="site-logo" href="http://www.norenge.com/">
<img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store">
</a>
to be an immediate descendant of the <section class="home_navigation" element. Then apply text-align: center; to that same section element and it achieves the look you're asking for.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package AccessPress Store
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
<?php if (as_before_top_header_enabled()): ?>
<div class="before-top-header">
<div class="ak-container clearfix">
<?php accesspress_ticker_header_customizer(); ?>
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<div class="welcome-user">
<span class="line">|</span>
<?php _e('Welcome ', 'accesspress-store'); ?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
<span class="user-name">
<?php echo $current_user->display_name; ?>
</span>
</a>
<?php _e('!', 'accesspress-store'); ?>
</div>
<?php }
?>
<?php if (is_active_sidebar('header-callto-action')): ?>
<div class="header-callto">
<?php dynamic_sidebar('header-callto-action') ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="top-header clearfix">
<div class="ak-container clearfix">
<!-- Cart Link -->
<?php
if (is_woocommerce_activated()):
echo accesspress_wcmenucart();
endif;
?>
<?php
if (function_exists('YITH_WCWL')) {
$wishlist_url = YITH_WCWL()->get_wishlist_url();
?>
<a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
<i class="fa fa-heart"></i>
<?php echo "(" . yith_wcwl_count_products() . ")"; ?>
</a>
<?php
}
?>
<div class="login-woocommerce">
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
<?php _e(' LogOut', 'accesspress-store'); ?>
</a>
<?php
} else {
?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
<?php _e('LogIn', 'accesspress-store'); ?>
</a>
<?php }
?>
</div>
<!-- if enabled from customizer -->
<?php if (!get_theme_mod('hide_header_product_search')) { ?>
<div class="search-form">
<?php get_search_form(); ?>
</div>
<?php } ?>
</div>
</div>
<section class="home_navigation">
<div class="inner_home">
<div class="ak-container clearfix">
<div id="site-branding" class="clearfix">
<?php accesspress_store_admin_header_image() ?>
</div><!-- .site-branding -->
<div class="right-header-main clearfix">
<div class="right-header clearfix">
<!-- if enabled from customizer -->
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="clearfix"></div>
<div id="menu">
<?php
if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
} else {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<a class="menu-toggle">
<?php _e('Menu', 'accesspress-store'); ?>
</a>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'store-menu',
'fallback_cb' => 'custom_fallback_menu',
)
);
?>
</nav><!-- #site-navigation -->
<?php } ?>
</div>
</div> <!-- right-header -->
</div> <!-- right-header-main -->
</div>
</div>
</section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code
Hi i'm create website for mobile phone,
but i have a problem
i want add space in between box css
this is screenshot
and this is my code
<?php
include "connection.php";
?>
<ul data-role="listview" data-icon="false" data-divider-theme="a">
<li data-role="list-divider"><center><font color="white"><b>Sekolah Rekomendasi</b></font></center></li>
<div id="owl-demo-5">
<?php
$dataskl = mysqli_query($con,"SELECT alamat,diskon,link,logo,kode,nama_sekolah,vvip from sekolah where vvip='Ya' order by id_sekolah desc limit 0,10");
while ($skl = mysqli_fetch_object($dataskl))
{
$jd = $skl->link;
?>
<div style="border-style:solid;border-width:2px;width:162px;" class='product_item'>
<div>
<a data-ajax="false" href='<?php echo $jd ?>'>
<img style="float:left; margin-right:8px;width:70px;height:85px;" src='images/sekolah/logo/<?php echo $skl->logo ?>' class='c_image_1' alt=''>
</a>
<?php if ($skl->diskon=="Ya") { ?>
<div class='ribbon'><img src='images/biaya.png' alt=''></div>
<?php } else { } ?>
</div>
<?php
$ptng_nama = substr($skl->nama_sekolah,0,15);
$ptng_alamat = substr($skl->alamat,0,34);
?>
<div class='product_info'>
<a style="text-decoration:none" data-ajax="false" href='<?php echo $jd ?>'><font size="1"><?php echo $ptng_nama ?></font></a><br/>
<font size="1"><?php echo $ptng_alamat ?></font><br/>
<?php
$datac_pre = mysql_query("select count(id_kunjungan) as hitung from sekolah_kunjungan where kode='$skl->kode' and tgl_kunjungan between '$web->range_awal' and '$web->range_akhir'");
$cpre = mysql_fetch_object($datac_pre); ?>
<font size='1' color='blue'>Dilihat : <?php echo $cpre->hitung ?></font>
</div>
</div>
<?php } ?>
</div>
</ul>
How to add space in between box ?
helpme thank's
You can use margin or padding property in the css rules for those blocks.
CSS:
body, html {
margin:0;
padding:0;
}
div {
width:100px;
display:inline-block;
border:1px solid black;
height:300px;
}
.a {
margin-right:20px;
}
HTML:
<div class="a"></div><div class="b"></div>
I added the text "MENY" next to toggle (nav-trigger). However I don't like the positioning of >MENY<, formatting/style is alright but the text needs to be more in the middle in relation to the toggle icon. They're stuck together as it is now. How do I separate them so I can adjust (raise(lower)) the text "MENY"? I keep messing it up so any guidance is much appreciated!!
How it is now (image):
How I'd like it (image):
My header php
<html <?php language_attributes(); ?> <?php thb_html_class(); ?>>
<head>
<?php thb_head_meta(); ?>
<title><?php thb_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php thb_body_start(); ?>
<div id="page">
<?php thb_header_before(); ?>
<header id="header">
<?php thb_header_start(); ?>
<div class="header-container">
<div class="wrapper">
<?php
$logo = thb_get_option('main_logo');
$logo_2x = thb_get_option('main_logo_retina');
if( !empty($logo['id']) && !empty($logo_2x['id']) ) : ?>
<?php $logo_metadata = wp_get_attachment_metadata($logo['id']); ?>
<style>
#media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('<?php echo thb_image_get_size($logo_2x['id'], 'full'); ?>');
background-size: <?php echo $logo_metadata['width']; ?>px, <?php echo $logo_metadata['height']; ?>px;
}
#logo img { visibility: hidden; }
}
</style>
<?php endif;
?>
<h1 id="logo">
<a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php if( isset($logo['id']) && $logo['id'] != '' ) : ?>
<img src="<?php echo thb_image_get_size($logo['id'], 'full'); ?>" alt="">
<?php else : ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a>
</h1>
<?php thb_nav_before(); ?>
<a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
<div class="nav-wrapper">
<nav id="main-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
<nav id="mobile-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
</div>
<?php thb_nav_after(); ?>
</div>
</div>
<div class="wrapper">
HTML Code:
<a href="#" id="nav-trigger" class="thb-loaded" style="margin-top: 30.5px;">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
</a>
Try using a negative margin-top value on the span containing the text.
I am trying to style a div that is nested in some ofter divs and having some trouble. Below is the code and css I am attempting to use. If you could show me the correct css tag to style the element called #cleanse I would appreciate it.
<!-- Header starts here -->
<header id="header">
<div class="align">
<!-- Logo start here -->
<div id="logo">
<?php if(get_option( 'ms_plain_logo')=="true" ) { ?>
<h1><a class="text_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"><?php echo get_bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h1><a class="img_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"></a></h1>
<?php } ?>
</div>
<!-- Logo ends here -->
<!-- Navbar -->
<?php $args=array(
'theme_location'=>'primary-navigation',
'container' => 'nav',
'container_id' => 'navigation-wrapper',
'menu_id' => 'navigation',
'fallback_cb' => false
); ?>
<?php wp_nav_menu($args); ?>
<?php if(!has_nav_menu( 'primary-navigation')) { ?>
<nav id="navigation-wrapper">
<ul id="navigation">
<?php wp_list_pages( 'title_li=&sort_column=menu_order'); ?>
</ul>
</nav>
<?php } ?>
<!-- Navbar ends here -->
<div id="cleanse">
<a href="link" target="_blank">
<img src="img"/></a>
</div>
</div>
</header>
<!-- Header ends here -->
#cleanse { top: 55px; }
What do want to do? Add a margin-top or something?
This only works with position:
#cleanse { top: 55px; }
Try this:
#cleanse { margin-top: 55px; }
Also the css should be placed in the header:
<style>
/* your rules here */
</style>