Menu
  • HOME
  • TAGS

Coditional CSS to display title on Blog only

Tag: css,wordpress,hide,title,codex

So, I'm trying to hide the page title on ALL pages, except the Blog Roll.

If I make the following changes to the style.css, it will hide the title on all pages, including the blog roll:

h1 {
    Display:none;
    font-size: 48px;
    margin: 33px 0;
}

and

.entry-title {
     Display:none;
     font-weight: normal;
     margin: 0 0 5px;
}

According to http://codex.wordpress.org/Conditional_Tags#Testing_for_sub-Pages, in order to single out the Blog Roll, I need to use the following condition:

if ( is_front_page() && is_home() ) {
  // Default homepage
} elseif ( is_front_page() ) {
  // static homepage
} elseif ( is_home() ) {
  // blog page
} else {
  //everyting else
}

So, I apply these conditions, to my code, where the changes successfully worked initially, however it simply does not work. The titles change size and shape, but are still visiable on ALL pages.

Revised code:

h1 {
    if ( is_front_page() && is_home() ) {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    } elseif ( is_front_page() ) {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    } elseif ( is_home() ) {
        font-size: 48px;
        margin: 33px 0;
    } else {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    }
}

And ..

.entry-title {
    if ( is_front_page() && is_home() ) {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    } elseif ( is_front_page() ) {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    } elseif ( is_home() ) {
        font-weight: normal;
        margin: 0 0 5px;
    } else {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    }
}

Can I not use Display:none; in a conditional statement or something?

Best How To :

from what i understand, you need to remove title only from blog page. the easiest way to do this with css is

.blog .entry-title{display:none}

where .blog is the class name of your blog page body. (you can get the body class name by inspecting elements.)

How to make background body overlay when use twitter-bootstrap popover?

html,css,twitter-bootstrap

Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

Button not center align in Safari

html,css,safari,center-align

if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...

Default scrollbar position

javascript,jquery,html,css,scroll

Here you go: http://jsfiddle.net/vtep7Lf1/ $("document").ready(function() { $("#ccwindow").animate({ scrollTop: $("#ccwindow").height() }, "slow"); return false; }); ...

Woocommece login URL

wordpress,woocommerce

Try this code: function redirect_login_page(){ if(is_user_logged_in()){ return; } global $post; // Store for checking if this page equals wp-login.php // permalink to the custom login page $login_page = get_permalink( 'CUSTOM_LOGIN_PAGE_ID' ); if( has_shortcode($post->post_content, "woocommerce_my_account") ) { wp_redirect( $login_page ); exit(); } } add_action( 'template_redirect','redirect_login_page' ); ...

HTML CSS Two 2-column tables side by side with same height and width

html,css

Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...

Adding horizontal space between 2 buttons using javascript

javascript,jquery,html,css

Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...

Render list starting from the bottom of its container

css

nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); padding: 0...

Dynamically resize side-by-side images with different dimensions to the same height

javascript,html,css,image

If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

How to reduce the size of picture on the background?

css

If you're trying to set fixed background image, this is example to scale and align your background image: .pic-wrap { display: block; height: 296px; background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg); background-size: 256px; background-position: 20px 50%; background-repeat: no-repeat; padding-left: 296px; border: 1px solid #ddd; } @media only screen and (max-width: 320px) { .pic-wrap { background-size:...

Iframe does not show scrollbar

html,css,angularjs,iframe,ionic

You have hidden scrollbars in ionic.app.css: ::-webkit-scrollbar { display: none; } I don't know if it is possible to override this style so probably you have to remove it. Similar question....

Fit an image inside a div that also has a title?

html,css,css3

One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...

How do I specify a css margin-top for foundation row div?

css,zurb-foundation

Use: div.row { margin-top: 12px; } or .row { margin-top: 12px !important; } ...

How to set DIV's width based on CSS indexes

html,css

If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

change css dynamically by selecting dropdown list item

jquery,html,css,drop-down-menu

I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...

bootstrap - dynamically changing jumbotron background image

javascript,jquery,html,css,bootstrap

You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...

Pure Css transition slide down panel not working

html,css,css3

Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox

Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...

WooCommerce seems to only orderby date and not price

php,ajax,wordpress,woocommerce

Try this: $args = array( 'post_type' => 'product', 'posts_per_page' => 100, 'product_cat' => 'beast-balls', 'orderby' => 'meta_value_num', 'meta_key' => '_price', 'order' => 'asc' ); ...

Wordpress log out using URL and redirect to specify page

javascript,php,wordpress

Try wp_logout() function use the funtion . if($_GET['logout'] == 1) { ob_start(); error_reporting(0); wp_logout(); $redirect = wp_logout_url(); wp_safe_redirect( $redirect ); } ...

Top header 100% of screen, but body only 70%?

html,css

Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...

Select n elements from hover event

javascript,html,css

Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...

add value to existing class in jQuery

javascript,jquery,html,css

Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

CSS bouncing line loader animation

html,css,animation

It is because you have a heavy break between 49% and 50%. 49% { width: 100%; } 50% { left: 100%; } Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect: @keyframes loader-animation { 0% { width: 0%;...

Difficulty applying two different scripts

javascript,jquery,html,css

The problem comes from the difference in relative paths depending on where that path is specified. When specified in a CSS file, the path is relative to that file. When you assign a url() path to an element in JavaScript, it is relative to the page in which the script...

How to remove all the borders of a selectbox?

jquery,html,css,drop-down-menu

Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...

ACF Multiple Map Markers

wordpress,google-maps,google-maps-api-3,acf

You can create a custom query and loop through all locations. var locations = [ <?php $args = array( 'post_type' => 'your_post_type', 'posts_per_page' => -1 ); $locations = new WP_Query($args); if($locations->have_posts()){ while($locations->have_posts()){ the_post(); $loc = get_field('location') ?> ['<?php echo get_the_title(); ?>', <?php echo $loc[0]; ?>, <?php echo $loc[1]; ?>], <?php...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

Website showing differently in windows xp and mobile

html,css

The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...

tag in HAML

html,css,haml

HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...

Text-decoration/CSS causing text to move

html,css,wordpress

This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...

CSS flexbox wraps content in FireFox (not Chrome)

css,google-chrome,firefox,flexbox,pseudo-element

Weird. button elements have some special behavior which seems to conflict with flexbox. Specifically, what happens is that the flex items are blockified, according to the spec: The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex...

Div is 100%width, but the browser still scrolls to the right

html,css

Set body to be max-width: 100%; and overflow-x: hidden; so it doesn't allow user to scroll to the sides. result: body { max-width: 100%; overflow-x: hidden; .. } ...

Changing font-size of
  • on wordpress
  • css,wordpress,html-lists

    I think you have style inheritance from upper element, check it with dev. tools in browser. You can also try to set inline style for: <li style: "font-size: 22px;">Name 1</li> or add !important in your css file, like this: td > ul li { font-size: 22px !important;"> } ...

    Fancybox thumbnail is not working

    javascript,jquery,html,css,fancybox

    You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...

    styles css in embeded souncloud player

    css,iframe,styles,embed,soundcloud

    CSS you are writing on your CSS file wont effect content of iFrame. Solutions: Do you really need an iFrame? Cant it be done using modal window or something like that? Add CSS you want to add using JS/JQuery $('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); }); ...

    WooCommerce: How to display Category Name in single-product.php

    php,wordpress,woocommerce

    Try this : global $post; $terms = get_the_terms( $post->ID, 'product_cat' ); foreach ($terms as $term) { echo $term->name .' '; $thumbnail_id = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true ); $image = wp_get_attachment_url( $thumbnail_id ); echo "'{$image}'"; } ...

    Wordpress End If Statements

    php,wordpress,woocommerce

    <?php if ( sizeof( $woocommerce->cart->cart_contents ) == 0 ) { // The cart is empty } else { ?> <div class="header-cart-inner"> <a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf (_n( '%d item', '%d items', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?> - <?php echo...

    Google map infowindow position on custom marker

    javascript,css,google-maps,google-maps-api-3

    Set the pixelOffset of the InfoWindow appropriately: From the documentation on InfoWindows pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor,...

    Div with the form of a pencil [duplicate]

    html,css,css-shapes

    .pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...

    How do you make a div only extend in one direction when the outer container size increases?

    javascript,html,css,css3,layout

    You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...

    Add second single product page in Woocommerce

    wordpress,woocommerce

    What I would do in this case is add a link that will reload the page with a custom query arg in the URL. Then you can filter the template via template_include to load a different template. Untested, so be careful of syntax typos. add_filter( 'template_include', 'so_30978278_single_product_alt' ); function so_30978278_single_product_alt(...

    Detect when the jQuery UI slider is being moved?

    jquery,html,css,jquery-ui

    You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...

    How To Check Value Of String

    javascript,css,string,numeric

    document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...

    login with username or email in wordpress

    wordpress

    Try this remove_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 ); add_filter( 'authenticate', 'tcb_authenticate_username_password', 20, 3 ); function tcb_authenticate_username_password( $user, $username, $password ) { if ( ! empty( $username ) && is_email( $username ) ) : if ( $user = get_user_by_email( $username ) $username = $user->user_login; endif; return wp_authenticate_username_password( null, $username, $password );...

    How can I keep a group of buttons centralized on the right side of the footer?

    html,css,button,footer

    I didn't actually test any of this, but in theory, these are possible solutions. So as not to mess up the CSS you have working on the set of buttons, Wrap the set of buttons in a div and apply one of these classes to the div. .footerButtonWrapper { margin:...

    change icon on collapse in Bootstrap 2.3 not in bootstrap 3

    javascript,jquery,css,html5,twitter-bootstrap

    Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...