CSS styling questions

Hey Thierry and others,

I have once again began looking at Beans and a few questions arise. I have made a few widget areas but am having a difficult time styling them with CSS.

I located the code for general default styling such as:

/* Site */
.tm-site {
  background-color: #000;
}

/* Main */
.tm-main {
  background-color: #e7e4e4;
}

/* Header */
.tm-header {
 background: red;
  margin: 10px; 
}

/* Primary Sidebar */
.tm-primary {
 background: blue;
}

/* Secondary Sidebar */
.tm-secondary {
  background: yellow;
}

/* Footer */
.tm-footer {
  background: grey;
}

There is a mention of the hero widget in the docs but no mention of CSS styling of the hero widget location.

Adding the hero section mentioned http://www.getbeans.io/documentation/adding-a-widget-area/ it contains the 'id' => 'hero'.

Adding to the css a

.hero {
  background: green;
}

or #hero makes no change.

It does not add a green area to the hero widget location. I have also tried other widget locations I have added but not been able to style them yet. So there is something I am obviousuly overlooking. I have checked inspect element in chrome but am still not figuring it out. Using inspect element is somewhat confusing. I have tried the div data-markup-id beans_widget_content[_hero][_text][_text-12] but it is a no go. Btw I have noticed that I can style the widget but have not been able to style the widget location.

It would be great to also add CSS when you add functions code so we can also see example of styling the specific code.

Hi Paal Joachim Romdahl,

I think you can adopt this footer widget code snippet. That code show how to add class with a div element in a widget area, so you can easily style it.

Hi Pandhu

Thank you for the added example!

It seems this means that for every widget location I want to style I need to add right below registering a widget code to display it:

// Display the footer widget area in the front end.
add_action( 'beans_footer_before_markup', 'example_footer_widget_area' );

function example_footer_widget_area() {

 ?>
  <div class="tm-mega-footer uk-block">
   <div class="uk-container uk-container-center">
      <?php echo beans_widget_area( 'footer' ); ?>
    </div>
  </div>
  <?php

}

The standard practice as I experience it just to create CSS using the id in the widget registration. It seems Beans adds the extra layer of display options with using the UIKit container.

Hi guys,

Here are a few things to understand, the id used when registering the widget area using beans_register_widget_area is not an HTML attribute but a unique identifier, also used used to display the widget area, for instance beans_widget_area( $widget_area_id ).

When you are unsure about a Beans function, your can Google it (or use the Beans Code Reference search). For example if you search beans_register_widget_area (see Code Reference) it is explained how to use the function and its parameters. If you scroll to the Parameters section, you can click on View Array to check how to use the parameters.

Regarding HTML attributes and to take a widget area which is displayed without wrapping HTML like in the example @paaljoachim mention, no specific HTML class or id is added (other than UIkit structural attributes) which is done on purpose. @paaljoachim you stated

The standard practice as I experience it just to create CSS using the id in the widget registration. It seems Beans adds the extra layer of display options with using the UIKit container.

Beans keeps HTML really lean and adds as little attributes as possible since we made it super easy to add your own on demand, so it is up to you to add the attributes you will use.

As @pandewa correctly mentioned, you can wrap your widget area in HTML like in this code snippet, but you could also use Beans HTML API to add your own attribute. If we take this example, we could easily add a class like this:

beans_add_attribute( 'beans_widget_area_grid[_hero]', 'class', 'example-class' );

If you are not really sure how to add attributes and how the Beans HTML API works, I suggest to read this article.

@paaljoachim note that the data-markup-id are only there in dev mode to help identifying elements but should under no circonstances be used as CSS selectors. Regarding your statement:

It seems this means that for every widget location I want to style I need to add right below registering a widget code to display it.

This is not correct, the beans_widget_area() is called in a action hook callback function which doesn't need to be declared under your widget area registration. In fact it can even be called in a page template for example.

Happy coding,

What I am used to with it is that I would take the ID for instance footer then through CSS add a .footer class and style it. But it does not work that way through Beans from how I understand it.

Searching for code referances. View Array information is important but very hidden away. It would be good to make obvious links more obvious. The rest of the information on the page is something I will have to get back to at another time...

It would be good to have an added examples on how to display the widgets. Right now I have the one method mentioned in the footer widget code. I will likely reuse something similar on all the other widget sections as well. Having some more info on this code and some example varients would help.

Lets see if I got this correct.

• Giving the display option one can display through a page template or directly through the code below a widget registration.
• Since Beans adds the display code it gives more customization options then the default way of handling and adding id to css.

The bottom line for me is that it would be good to have a documentation for basic in the top and intermediate and advanced further down. I will go ahead and continue working on my child theme and ask questions as they come up. This is a case of I have to be very stubborn to get into this as I experience that the basic doc level is not in place but is tailored for developers. I want to write about Beans and share some tutorials after having understood more of the basics of creating a child theme with Beans.

Thank you Thierry for your reply!

Hi Paal,

The footer widget area code snippet shows you how to register and display the footer.

The functions don't have to be below one another, the registration part must be in functions.php and the echoing part can be in functions.php or in your template file.

You can re-use this same code example in different scenarios. For example if you change beans_footer_before_markup action handle to beans_header_after_markup I will see that example_footer_widget_area() will be displayed below the header. I have pretty much explained everything you need to know in my previous reply 😉

When it comes to documentation, there are level tags to indicate who it is for. Beans is more developer orientated by nature because there is no fluff and bloat (admin and front end) but anybody can easily jump in and it doesn't require advanced coding skills when using code snippet. More themes and eventually plugins will come in the near future.

Donations will partly be used for video tutorials but there is no ETA on that at this stage.

Cheers,

Thank you for very good explainations! I have created my own notes for a future tutorial. I will also likely create a demo child theme that I will add to github for people to learn from.