I asked the question “How do I show the the site title and logo at the same time with Beans?”
at the Get Beans forum. Tonya replied.
The below result shows a modified version of the code that Tonya shared.
To understand the code.
1. Turn on Development Mode: WordPress admin -> Appearance -> Settings.
Go to the frontend and right click the site title/logo. Move the cursor over the data-markup-id beans_logo_image.
I decided to add_filter after the beans_logo_image.
Here is the code that I added to the child theme functions.php file.
add_filter( 'beans_logo_image_after_markup', function() { echo '<span>'; beans_output_e( 'beans_site_title_text', get_bloginfo( 'name' ) ); echo '</span>'; } );
The CSS I used:
.tm-site-branding, .tm-site-branding a { font-size: 74px; line-height: 24px; color: #FFD700; font-weight: 800; text-decoration: none; font-family: times; display: block; float: none; /* width: 100%; */ text-align: center; font-family: "tangerine"; text-shadow: 1px 1px 1px #000; font-stretch: expanded; }
.tm-site-branding, .tm-site-branding a:hover { color: greenyellow; } .tm-logo { display: block; margin: auto; padding-bottom: 45px; }
Site branding affects image logo and text. I then added a hover. To only affect the image logo I added a display block, margin auto to have it centered, and a padding bottom to give some space to where the site title is located.
Thank you Tonya!
Here is the getbeans forum thread: community.getbeans.io/discussion/how-to-show-both-the-site-title-and-logo/
No comment yet, add your voice below!