[Henrik Blomgren]

Oh I´ve bonked my head against the monitor a lot wondering why something isn´t being the "chosen style" and noticed two things.

1: On what line you place the CSS on is important. Have the same selector further down? it will not load the style you place above it. As it should be as the file is read top to bottom.

2: When using the customizer in WordPress it outputs style choices made there into a <style> segment on the website For Authority pro as it is coded the color chosen is taking over a lot of selectors and since it is loaded after the style.css it demands a !important in the style.css that you want to work.

Or you could simply do it the old fashioned way and only edit the style.css file but that brings it´s own set of things that can go wrong. Like forgetting to rename the child-theme and then updating it so every change you did is gone XD And yes, I´ve done this.

[Henrik Blomgren]

Well. I would basically recommend this:

Create a Utility Bar Above the Header in Genesis

Since it´s basically what you want. It is placed above the site-header code in your theme and thus works really well.

If coding isn´t your thing then if you feel that it´s a good source and such(I just found this place so I do not know myself but if it works it works right?)

How to Add TopBar in Genesis Framework (RainaStudio Map 101)

And then just style it as you want.

[Henrik Blomgren]

Do you want it to be the whole browser width or the "full-width" of 1280px on your pages?

If you want it to be full-width aka 1280px on your page?

.full-width-content .content {
    border-right: none;
    float: none;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 840px; */
    width: 100%;
}

on line 665 in style.css. This will make the page with 1280px wide. Beware that this will turn every page that uses the full-width-content choice will be this large.

If you want the whole browser width? Then that is a heavy customization your going to have to do. As you need to add

.page .site-inner {
    max-width: none;
}

To your style.css and then you need to sit and redo every single padding/margin that is in use.

Another way of doing it is to find the element you want to make full-width and simply add

.your selector or block or whatever you want to be full-width {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}

the above is taken from https://richtabor.com/gutenberg-image-alignments/ but it should work on elements as well.

So what you would do there is fine the element you want, like a image

normally the outputed code would be

But with the above choice you would enclose it in a wrap.

<div class="yourselectortowideneverythingtofullwidth">

</div>

Or I have missunderstood what it is you want to do and all of this is rabble.

[Henrik Blomgren]

On what occurance do you want to make the logo a little bigger? Since I´m guessing it´s on desktops with a width of over 800px?

If you check the style.css you will find this code

@media only screen and (min-width: 800px)
.header-image .site-title > a {
    height: 72px;
    width: 200px;
}

at line 1950.

This changes the height and width of the logotype on browsers with a width of at least 800px to be 72px in height and 200px wide. Below that and it use this code

.header-image .site-title > a {
    background-position: center center !important;
    background-size: contain !important;
    float: left;
    height: 5rem;
    width: 14rem;
    background-image: url(assets/images/logo_dark.png);
}

on line 1899 in your style.css

to decide that the height should be 5rem or 50px and width should be 14rem which equalls 140px.

So to change the size of the logo in the Boss Pro theme you adjust the height and width of these two values. I´d suggest keeping the existing values as the base and then resizing accordingly so the aspect ratio stays the same.

[Henrik Blomgren]

Hi,

What happends is that you have chosen a color in the customizer. This value is then sent out to the theme to replace the other occurances of said color.

So the reason your code isn´t working is because of that it get denied since it is not the last loaded css style for this selector.

If you try

.genesis-nav-menu a:hover { color: red !important; }

I believe it should work.

What !important does is tell the browser that hey browser. Even if you find this selector and a different code further down in the style.css or even if it´s added after the style.css has loaded it should still be this value. It´s important!

Hope this helps.

[Henrik Blomgren]

Yes, I tried it and it works splendid. Thank you for the help!

[Henrik Blomgren]

This reply has been marked as private.

[Henrik Blomgren]

I´ve tried adding body classes, post classes and just about everything. When it is applied to the normal loop it works. When applied to a custom loop that is copy the base loop from genesis library and adding an array of post types as posted above and using that loop to make things happen?

This code does not work. Why it doesn´t I have no idea about but it does not work on a custom loop. Only on the standard loop.

[Henrik Blomgren]

Absolutely right it doesn´t work. On a custom loop it doesn´t work at all. On the normal loop when it´s the standard genesis loop? it works.

On a custom loop it doesn´t work at all. Same issue as it has been.

And yes the topic is what I want to do at this point. Doing whatever else I intend to do with the posts after I´ve learned this? A different topic yes.

Right now I want to learn how to add a custom class to certain posts in a custom loop.

Which none of what you have typed so far has managed to do. For what weird reason I do not understand but since it seems to not work for anyone it´s something to discuss with SP as well XD

[Henrik Blomgren]

Same result! doesn´t work at all XD unless I change @wp_query to @query and then it outputs latest-left on everything.

But alright. I will post everything I have to see where the crap I am doing it wrong.

frontpage.php gets these lines of code

//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

//* Add custom genesis loop
add_action( 'genesis_loop', 'hb8_loop' );

function hb8_loop() {
	//* Grab template part for displaying the posts
  get_template_part( '/lib/templates/front-grid', 'section' );

}

Since I have a very bad irritation with posting queries and what not in any base level files since it has gotten so bad when I had tried doing it in the past now I make a separate file.

My current front-grid.php is

<?php

// if we are not on front page, abort.
	if ( ! is_front_page() ) {
		return;
	}

	// WP_Query arguments
	$args = array (
		'post_type'          => array('recension','post' ),
		'posts_per_page'         => '12',
	);

	// Yay we´re counting up to do special stuff with certain numbers.
	$i = 1;

	
	// The Query
	$query = new WP_Query( $args );

	// The Loop
	if ( $query->have_posts() ) {

    echo '<div class="hb-grid clearfix">';

		while ( $query->have_posts() ) {
			$query->the_post();

			if( 0 == $query->current_post ) {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				printf( '<div %s>', genesis_attr( 'entry-content' ) );
				do_action( 'genesis_entry_content' );
				echo '</div>';

				echo '</article>';
				$i++;
			}

			elseif (7 == $query->current_post ) {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				printf( '<div %s>', genesis_attr( 'entry-content' ) );
				do_action( 'genesis_entry_content' );
				echo '</div>';

				echo '</article>';
				$i++;
			}
			
			else {

				printf( '<article %s>', genesis_attr( 'entry' ) );
				do_action( 'genesis_entry_header' );
				echo '</article>';
			$i++;
			}
		}

		echo '</div><!-- end hb-grid-posts -->';
		
	} else {
		// no posts found
	}
	// Restore original Post Data
	wp_reset_postdata();

Where should I put the above code that you wrote? If I place it after
if ( $query->have_posts() ) {

then it doesn´t output anything. If I change wp_query to query it outputs on every post.

So that is why I am so confused. It should work but somehow it doesn´t? So thank you for the help so far. Hoping this all makes sense.

[Henrik Blomgren]

This is for making post number 1 and 8 output different code. Doing a custom loop on the front page of the design, post 1 and 8 will be Header, Post excerpt and "continue reading" button. All other posts will only be featured image, post title and header entry-meta.

And yes, in basic performance and style I want to learn how they added extra classes to certain posts like in Copyblogger.com

Just that I want to add some personal flair to that base design.

Why would it add the post only on a archive page though? And why does it produce the same result when I do it in a roundabout way with

add_filter( 'genesis_attr_entry', 'hb8_class' ); ?

Even if I change the number above to 7 (to work on the 8th post) it doesn´t appear at all. So so far it´s either work on everything or none. Which is kinda frustrating since it shouldn´t have to be this hard.

Unless it is working this way because I´m working in a custom query and not the genesis base one.

I don´t know but I do want to learn.

And yes, for adding just styles using a CSS approach works splendid. Now it isn´t just CSS that is going to be changed and outputed differently though 🙁

[Henrik Blomgren]

So I am guessing using something along the lines of Bill Erickssons code

**
 * Add class to first post
 * 
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/use-the-built-in-post-counter/
 * 
 * @param array $classes
 * @return array
 */
function be_class_on_first_post( $classes ) {
  global $wp_query;
  if( 0 == $wp_query->current_post )
    $classes[] = 'first-post';
    
  return $classes;
}
add_filter( 'post_class', 'be_class_on_first_post' );

Should work right? Only thing is it doesn´t. If I replace wp_query with my own query name(named simply $query then it outputs first-post. On all posts in the query. So close but yet so far XD and I don´t understand why it outputs it at all posts.

[Henrik Blomgren]

Hi Brad,

Thank you! Will look into using current_post. You never stop to learn and this is awesome.

[Henrik Blomgren]

Issue solved. Thanks to me not placing

//* Force full-width-content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

in the functions.php file it still outputed the sidebar code. So not just unregistering the layout options was enough to stop this from happening. I had to manually remove the unregister layout options and then choose fullwidth in Genesis settings to get it working. Then I could add the forcing of fullwidth to my functions php and add on the unregister layout code.

So issue solved. Now the website just need to update it´s cache which will take like 20 hours currently.

[Henrik Blomgren]

Hi Victor,

Thanks for the answer. But if you use media queries to turn a static studiopress banner with a width of 300x250px into another studiopress banner that is 729x80px by media queries alone your a magician as I´ve never read or seen static images when switched with media queries switching between two separate images nor have I seen any css code turn a big block of a banner into a sexy small wide banner.

If I´d written code for one block of advertisment and written words and finished it off with a button that links to said page? Then media queries is the way to go. But not with static images that are of two complete different formats. Ever tried getting a 2560x1400 image on a 800x600 screen? You only get the middle of the image or you make the image stretch and look bad in some way.

So your answer was a run on the mill. I´ve been designing sites and doing media queries for about 3 years now. Nowhere have I found a media query that explicitly changes one image into another when code from a plugin is outputed. Making the container work magic? yes. Images filling out the whole screen? easy enough. But turning the studiopress advertisment box into a lying tower with media queries alone without losing quality, sharpness or anything of the image? never seen it.

[Henrik Blomgren]

Well... I turned my computer off. Went away for a bit, changed from having a static home page and a certain page for articles to being dynamic, refreshed the site and voila, links work as they should again.

So... am I some computer wizard finding new ways of breaking everything or just what am I?

A quick test, once again using the prefered way of handling a front page and blog page without using the blog template results in the above error. So fun times ahead.

[Henrik Blomgren]

Hiya Francisco,

Thank you so much for your kind words. There is a quite simple reason as to why there are no header images appearing on about, contact pages. I simply haven´t uploaded a fitting image there yet. It´s coming but thanks for pointing it out.

I wanted to get the redesign out and open. I am thinking about adding a services area on the front page. But I´ll be honest, I am kinda bad at writing good explanations for what I do with each service. But I am thinking about it. Something. Also my rates would be very varied as they would be on mainly project basis. I´ll think about it though.

Thanks for the feedback!

Stockholm is a pretty nice city yes. I´m kinda long away from our capital though XD

[Henrik Blomgren]

Thank you Kristie! It has been a work covering a couple months so yeah. I think I got all the finer details worked out XD It being clean is what I focused on. Easy on the eyes and clean and easy to read.

Thanks once again the encouraging words.

[Henrik Blomgren]

I noticed that... made some changes to the plugin and replaced the shortcode used. So last time I checked it worked.

[Henrik Blomgren]

Well. The new design is up and running over at http://henrikblomgren.net. Front page uses custom queries and from what I see in the outputted code it displays no errors so I guess it worked fine. Thanks once again for the help Brad!

[Author]

Posts