Prosilver Style Fixes

[Sniper_E]

The prosilver style has a lot of problems in it. Let's consolidate the fixes here.

I have noticed a lot of Prosilver Style discussions and fixes throughout the forums. They are scattered and hard to find all of them.
I?m cataloging all the fixes in one forum making them easier to locate. Please post a new topic regarding a new fix if you find one and I or one of the staff members will post it in this topic.

Thanks!

[Sniper_E]

Creating Corners for Prosilver

I don't like the white edges. Is there a solution for ?

I have come up with the perfect solution for creating the corners for prosilver.
Like us, if you want to get rid of that white background, you will need to create new corners to match your new background color.

In PhotoShop, create a new transparent image 6px x 12px.
Create a new layer in there with your new background color and cut out the areas not needed.
Save that image as corners_right.png. Rotate the image horizontal and save it as corners_left.png.
Then copy those 2 new images to your server.

Let's step this up a notch....
If you want to use a textured background in your page like we did, this is how you create corners for that.
Open your background image. Select all of your image and copy.
Create a new transparent image of that size and paste your copied image into it.
Reduce the canvas size of that image to 6px x 12px and cut out the areas not needed.
Save that image as corners_right.png. Rotate the image horizontal and save it as corners_left.png.
Then copy those 2 new images to your server.

And here is a snapshot of the steps taken to create the textured corners in PhotoShop.

[Sniper_E]

Switching Postbody and Postprofile (Left to Right)

Open the ./styles/prosilver/theme/content.css

Spoiler:

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
    padding: 0;
    line-height: 1.48em;
    color: #333333;
    width: 76%;        // change to width: 80%;
    float: left;        // change to float: right;
    clear: both;
}

.postbody .ignore {
    font-size: 1.1em;
}

.postbody h3.first {
    /* The first post on the page uses this */
    font-size: 1.7em;
}

.postbody h3 {
    /* Postbody requires a different h3 format - so change it here */
    font-size: 1.5em;
    padding: 2px 0 0 0;        // Change to padding: 0 0 0 2px;
    margin: 0 0 0.3em 0 !important;        // Change to margin: 0 0.3em 0 0 !important;
    text-transform: none;
    border: none;
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    line-height: 125%;
}

/* Poster profile block
----------------------------------------*/
.postprofile {
    /* Also see tweaks.css */
    margin: 5px 0 10px 0;        // Change to margin: 0 10px 0 5px;
    min-height: 80px;
    color: #666666;
    border-left: 1px solid #FFFFFF;        // Change to border-right: 1px solid #FFFFFF;
    width: 22%;        // Change to width: 18%;
    float: right;        // Change to float: left;
    display: inline;
}
.pm .postprofile {
    border-left: 1px solid #DDDDDD;        // Change to border-right: 1px solid #DDDDDD;
}

.postprofile dd, .postprofile dt {
    line-height: 1.2em;
    margin-left: 8px;        // Change to margin-right: 8px;
} 

These steps below will move your buttons to the lower right corner of the viewtopic page.

Open the ./styles/prosilver/template/viewtopic_body.html

Spoiler:

Code: Select all

// OPEN styles/prosilver/viewtopic_body.html

// FIND

<!-- BEGIN postrow -->
   <!-- IF postrow.S_FIRST_UNREAD --><a id="unread"></a><!-- ENDIF -->
   <div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD == 1 --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->">
      <div class="inner"><span class="corners-top"><span></span></span>

      <div class="postbody">         <!-- IF postrow.S_IGNORE_POST -->
            <div class="ignore">{postrow.L_IGNORE_POST}</div>
         <!-- ELSE -->

      <!-- IF not S_IS_BOT -->
         <!-- IF postrow.U_QUOTE or postrow.U_INFO or postrow.U_DELETE or postrow.U_EDIT -->
            <ul class="profile-icons">
               <!-- IF postrow.U_QUOTE --><li class="quote-icon"><a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}"><span>{L_REPLY_WITH_QUOTE}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_DELETE --><li class="delete-icon"><a href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_REPORT --><li class="report-icon"><a href="{postrow.U_REPORT}" title="{L_REPORT_POST}"><span>{L_REPORT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_WARN --><li class="warn-icon"><a href="{postrow.U_WARN}" title="{L_WARN_USER}"><span>{WARN_USER}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_INFO --><li class="info-icon"><a href="{postrow.U_INFO}" title="{L_INFORMATION}"><span>{L_INFORMATION}</span></a></li><!-- ENDIF -->
            </ul>
         <!-- ENDIF -->
      <!-- ENDIF -->

// CUT OUT THIS SECTION

      <!-- IF not S_IS_BOT -->
         <!-- IF postrow.U_QUOTE or postrow.U_INFO or postrow.U_DELETE or postrow.U_EDIT -->
            <ul class="profile-icons">
               <!-- IF postrow.U_QUOTE --><li class="quote-icon"><a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}"><span>{L_REPLY_WITH_QUOTE}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_DELETE --><li class="delete-icon"><a href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_REPORT --><li class="report-icon"><a href="{postrow.U_REPORT}" title="{L_REPORT_POST}"><span>{L_REPORT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_WARN --><li class="warn-icon"><a href="{postrow.U_WARN}" title="{L_WARN_USER}"><span>{WARN_USER}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_INFO --><li class="info-icon"><a href="{postrow.U_INFO}" title="{L_INFORMATION}"><span>{L_INFORMATION}</span></a></li><!-- ENDIF -->
            </ul>
         <!-- ENDIF -->
      <!-- ENDIF -->

// PASTE IN BEFORE THESE LINE

         <!-- IF postrow.SIGNATURE --><div id="sig {postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->
      <!-- ENDIF -->

      </div>

// CLOSE AND SAVE

You can see the changes here: http://startrekguide.com/forum/viewtopi ... 307#p24307

[Sniper_E]

ads_after_first_post in Prosilver
Original Author: angelside
Original Thread: http://startrekguide.com/forum/f27t1512-ads_after_first_post.html

This is [How To] Add ads in your viewtopic_body.html page.

Create a new file and save as ./styles/prosilver/template/viewtopic_ads.html

Spoiler:

Code: Select all

// OPEN NEW DOCUMENT AND PAST IN

    <div class="post bg3">
        <div class="inner"><span class="corners-top"><span></span></span>

        <dl class="postbody">
            <br>
            <div class="content">
            - YOUR ADS GO HERE -
            </div>
        </dl>

        <dl class="postprofile">
            <dd style="text-align: center;">
            <b class="postauthor"> - YOUR ADS NAME GOES HERE - </b>
            <br><br>
            - YOUR ADS AVATAR GOES HERE -
            </dd>
        </dl>

        <span class="corners-bottom"><span></span></span></div>
    </div>

    <hr class="divider" />

// SAVE AS ./styles/prosilver/template/viewtopic_ads.html

Open ./styles/prosilver/template/viewtopic_body.html

Spoiler:

Code: Select all

// FIND

    <hr class="divider" />
<!-- END postrow -->

// REPLACE WITH

    <hr class="divider" />
    <!-- IF postrow.S_FIRST_ROW or postrow.S_ROW_COUNT > 5 and postrow.S_LAST_ROW -->
        <!-- INCLUDE viewtopic_ads.html -->
    <!-- ENDIF -->
<!-- END postrow -->

// CLOSE AND SAVE

[Sniper_E]

Floating Topic Icons in Prosilver

I finally notice that problem with the floating icon in the topic list.
Here we will take those floating topic icons out.... and place them in the line. This is [How To] fix this problem.
Open the ./styles/prosilver/template/viewforum_body.html :: start on line 141

Spoiler:

Code: Select all

// FIND

            <dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG});<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
               <!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
               <!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
               <!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
               <!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME}
            </dt>

// REPLACE WITH

            <dt title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
               <!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
               <!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
               <!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
               <!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS --><img src="{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}">&nbsp;<!-- ENDIF -->
               <!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME}
            </dt>

// CLOSE AND SAVE

You can see the changes below.

[Highway of Life]

Q & A

Q. The changes I make to the stylesheets are not appearing on the forum, what am I doing wrong?

A. If you have variables inside your stylesheet, as prosilver does, phpBB3 needs to send these to the database and back out through the cache so that the variables can be properly parsed.
This can pose a challenge to style developers or just trying to tweak the style.
The solution is to either go to the ACP > Styles > Themes and hit refresh on prosilver, or, an easier method, is to add then delete a newline in stylesheet.css and upload it.
Because this file has a new "Modified date", phpBB3 will refresh/reparse the CSS files automatically.
Many times, this is a simpler method then going into the ACP to refresh the theme every time you are making a change and want to see it.

[Sniper_E]

Adding Warnings Count in Prosilver Topics

Copy icon_post_warnings.gif to styles/prosilver/imageset/icon_post_warnings.gif

Spoiler:

Code: Select all

// OPEN viewtopic.php

// Find

          'U_WARN'            => ($auth->acl_getf_global('m_warn') && $poster_id != $user->data['user_id'] && $poster_id != ANONYMOUS) ? append_sid("{$phpbb_root_path}mcp.$phpEx", 'i=warn&mode=warn_post&f=' . $forum_id . '&p=' . $row['post_id'], true, $user->session_id) : '',

// After Add

          'U_WARNINGS'        => append_sid("{$phpbb_root_path}mcp.$phpEx", "i=notes&mode=user_notes&u=$poster_id"),


// Open styles/prosilver/theme/button.css

// Find

.warn-icon, .warn-icon a         { background: none top left no-repeat; }

// Afer Add

.warnings-icon, .warnings-icon a         { background: none top left no-repeat; }


// Open styles/prosilver/theme/colours.css

// Find

.warn-icon, .warn-icon a         { background-image: url("{T_IMAGESET_PATH}/icon_post_report.gif"); }

// After Add

.warnings-icon, .warnings-icon a         { background-image: url("{T_IMAGESET_PATH}/icon_post_warnings.gif"); }


// Open styles/prosilver/template/viewtopic_body.html

// Find

               <!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->

// After Add

            <!-- IF U_MCP and postrow.POSTER_WARNINGS neq 0 --><li class="warnings-icon"><a class="warnings" href="{postrow.U_WARNINGS}" title="{L_WARNINGS} {postrow.POSTER_WARNINGS}"><span>{L_WARNINGS} {postrow.POSTER_WARNINGS}</span></a></li><!-- ENDIF -->

// Close and Save All

Mouseover warnings icon to view warnings count.

[Sniper_E]

Replacing Prosilver side wrapper Online Image

Here we will remove the slanted online image from the corner
and replace it with online/offline images above the user name.

Spoiler:

OPEN prosilver/template/viewtopic_body.html

FIND

Code: Select all

<!-- BEGIN postrow -->
   <!-- IF postrow.S_FIRST_UNREAD --><a id="unread"></a><!-- ENDIF -->
   <div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->">

FIND INLINE and REMOVE

Code: Select all

<!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->

FIND

Code: Select all

               <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />

ADD AFTER

Code: Select all

            <!-- IF postrow.ONLINE_IMG -->{postrow.ONLINE_IMG}<!-- ENDIF --><br />

CLOSE and SAVE

Example images:
Find 2 online/offline images and upload them to prosilver/imageset/en/ directory.
Upload icon_user_online.png and icon_user_offline.png in this example.

Go into ACP / Styles / Imageset / Edit prosilver /
find User online [en] / Browse for icon_user_online.png image / Include dimensions: Yes 62 X 15 / Submit
Then again, find User offline [en] / Browse for icon_user_offline.png image / Include dimensions: Yes 62 X 15 / Submit

Go into ACP / Styles / Template / Refresh prosilver
Now go look at the viewtopic page.