My Forum PUNBB i need your help
My Forum Link

Hello!

The CSS below corrects the first error (from left to right in your image)

Code:


.pun .post .user {
  margin-left: -168px !important;
  width: auto !important;
}
.pun .postmain {
  margin-left: 182px !important;
}


Result:

Spoiler:

In this others I did not understand what you want:


So long,

JS

i want enlarge the title
and want move the date of post to corner side (blue)

Is this what you want?


If so, just add the following CSS:

Code:


.pun .posthead {
  padding: 14px 1.3em 34px 1em !important;
}
.posthead h2 {
  float: right;
}
.pun .posthead h2 strong {
  float: right;
  margin-left: 10px;
}


JS

JS, he wants to move the title of the topic and the date of the topic to the blue bar and make the blue bar larger (height) if i understood correctly.

Up for a start you must separate the topics title bar with the rest of the bars. So you must go to:
Admin Panel >> Display >> Templates >> viewtopic_body
find this code:

Code:

<div class="main-head clearfix">
      <p class="h2">
         <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a>  
         {L_MESSAGE} [{PAGE_NUMBER}]
      </p>
   </div>

which is located after the: {POLL_DISPLAY}
and replace it with this one:

Code:

<div class="main-head clearfix">
      <p class="h2i">
         <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a>  
         {L_MESSAGE} [{PAGE_NUMBER}]
      </p>
   </div>

Also in the same template find this code so you will be able to make the title and the date to move:
Find:

Code:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                  <h2>
                     <strong>{postrow.displayed.COUNT_POSTS}</strong>
                     {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
                  </h2>
               </div>

and replace it with this one:

Code:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                  <h2>
                     <strong>{postrow.displayed.COUNT_POSTS}</strong>
                                                  {postrow.displayed.ICON} <div class="topicstitles"><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></div> <div class="topicsdates">{postrow.displayed.POST_DATE_NEW}</div>
                  </h2>
               </div>

Push submit and the press the green cross to publish.. (  )

And at last go to:
Admin Panel >> Display >> Colors and pics >> Colors >> CSS Stylesheet
and add this part of the code:

Code:

/* Title Bar Height Larger*/
.h2i {height: 35px;}
/*Title of the topics at the left side*/
.topicstitles { position: absolute;
  margin: -30px 0px 0px -200px;}
/*Date of the topics at the right side*/
.topicsdates {position:absolute;
  margin: -50px 0px 0px 550px;}

And push submit and as soon as it loads should be fixed.


Test Forum Example:

(Sorry for the Greek )

no , i dont mean that

1. i want bold and enlarging the title 

2. i want move the date of post to the left corner in the blue coloumn

Ok so you can make the same mostly same steps.
You must go to:
Admin Panel >> Display >> Templates >> viewtopic_body
find this code:

Code:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                  <h2>
                     <strong>{postrow.displayed.COUNT_POSTS}</strong>
                     {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
                  </h2>
               </div>

Replace it with this one:

Code:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                  <h2>
                     <strong>{postrow.displayed.COUNT_POSTS}</strong>
                                                  {postrow.displayed.ICON} <div class="topicstitles"><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></div> <div class="topicsdates">{postrow.displayed.POST_DATE_NEW}</div>
                  </h2>
               </div>

Push submit and the press the green cross to publish.. (    )

And at last go to:
Admin Panel >> Display >> Colors and pics >> Colors >> CSS Stylesheet
and add this part of the code:

Code:

/*Title of the topics modification*/
.topicstitles { font-weight:bold;
font-size:14px;}
/*Date of the topics at the right side*/
.topicsdates {position:absolute;
  margin: -50px 0px 0px 550px;}

and press submit and finished!

Result:

but the number of topic (1) i want to the right not left position

That is my test forum number my friend. Your topic counter won't be affected.

i'm affraid is effect to SERP, anybody else can help me for what i want ?

Nothing else will be affected. These commands affect only the given commands. Nothing else.

sorry its does not work in my forum  anything else?