Having Trouble Adjusting Site Description In Theme

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Mulsiphix
Registered User
Posts: 205
Joined: Sun Oct 25, 2015 3:14 am
Location: USA

Having Trouble Adjusting Site Description In Theme

Post by Mulsiphix »

I would like to modify a non-ProSilver style: Simplicity. I was able to find this:

Code: Select all

styles/prosilver/template/overall_header.html
found this:

Code: Select all

<div id="site-description" class="site-description">
    <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
    <h1>{SITENAME}</h1>
    <p>{SITE_DESCRIPTION}</p>
    <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>

This establishes my baseline. Now I will compare it to Simplicity:

Code: Select all

styles/simplicity_3.2.7/simplicity/template/overall_header.html

Code: Select all

<div id="site-description" class="site-description">
   <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/logo.png" data-src-hd="{T_THEME_PATH}/images/logo_hd.png" alt="{SITENAME}"/></a>
   <p class="sitename">{SITENAME}</p>
   <p>{SITE_DESCRIPTION}</p>
   <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
This is as far as I have gotten. I'm not sure how to get the Site Description to appear on the Simplicity forum. Here is a picture of what I'm hoping to add to Simplicity.

Image
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Having Trouble Adjusting Site Description In Theme

Post by DTMWC »

In the stylsheet css file simplicity/theme/stylesheet.css, look for line: 206,

Code: Select all

 .site-description h1, .site-description p {
    display: none;
}
If change that to display: block; the site description and site name will appear.

If you only want the description and not the site name - you would split the 2 so it becomes this:

Code: Select all

 .site-description h1 {
    display: none;
}

.site-description p {
    display: block;
}
Boom.
User avatar
Mulsiphix
Registered User
Posts: 205
Joined: Sun Oct 25, 2015 3:14 am
Location: USA

Re: Having Trouble Adjusting Site Description In Theme

Post by Mulsiphix »

That is awesome! Thank you so much :D

Okay, so I've modified the code and the Forum image is appearing over the Site Description. It is possible to mimic the style of prosilver, where the image is to the left and the text is to the right?

Image
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Having Trouble Adjusting Site Description In Theme

Post by DTMWC »

No problem,

To put the logo on the left, you need to make these edits to the style sheet,

Around line 201, find:

Code: Select all

.site-description {
  text-align: center;
}

Change it to:

Code: Select all

.site-description {
  float: left;
  width: 65%;
}

Around line 188, find:

Code: Select all

.logo {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px 0;
}

Change it to:

Code: Select all

.logo {
    float: left;
    width: auto;
    padding: 10px 13px 0 10px;
}

After making these changes, you will notice when the screen is minimized to less than 700px just the logo will be there on the left side - but on prosilver it's just the site name in the center and no logo.

You can basically have any of the logo, site name, site description or all of them or 2 of them there :)
Boom.
User avatar
Mulsiphix
Registered User
Posts: 205
Joined: Sun Oct 25, 2015 3:14 am
Location: USA

Re: Having Trouble Adjusting Site Description In Theme

Post by Mulsiphix »

It works perfectly! Truly, thank you so very much :lol:

Return to “[3.2.x] Styles Support & Discussion”