JP
  • Posts: 398
  • Joined: 08/01/2009
Hmmm.... I think I now have got a bit of an understanding of how the forum CSS works...

At the same time, I think I will try to make some kind of documentation of common CSS tags that might be useful for those who use YAF and wish to tweak specific elements - and are CSS challenged, like me...


Now I am very hopefully waiting for tha_watcha to tell me how to use CSS gradients also for IE... 😄
Then there will be no need for background images at all in the styling for bars & buttons, which would be great... 😉
Would be immensely grateful for any help in getting gradients in IE working... Hint. hint.... 😁
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
tha_watcha
  • Posts: 4083
  • Joined: 06/03/2010
Originally Posted by: JP


At the same time, I think I will try to make some kind of documentation of common CSS tags that might be useful for those who use YAF and wish to tweak specific elements - and are CSS challenged, like me...



If you mean by that which css class or id is for which element you dont need to write an documentation for that, you do know that every browser comes with an "inspect element feature"? Where you click on the element and it shows you the css class and the current style.

Originally Posted by: JP


Now I am very hopefully waiting for tha_watcha to tell me how to use CSS gradients also for IE... 😄
Then there will be no need for background images at all in the styling for bars & buttons, which would be great... 😉
Would be immensely grateful for any help in getting gradients in IE working... Hint. hint.... 😁



.test {
	background: url('HeaderBack.png') repeat-x #d81b21 bottom;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	background: -o-linear-gradient(top, #ed1c24,  #aa1317); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ed1c24,  #aa1317); /* IE10+ */
	background: linear-gradient(top, #ed1c24,  #aa1317); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#aa1317',GradientType=0 ); /* IE6-9 */
}


UserPostedImage
JP
  • Posts: 398
  • Joined: 08/01/2009
Thank you for showing the CSS needed! 👍
Will try this tomorrow.

Of course you can inspect every element, but that's quite tedious work for every single element in the long run...
I just thought it would be nice to have some kind of quick reference of the key elements for CSS illiterates like me...

You know, those who download the software and want to make some basic tweaks and don't know how to do it...


Edit: This is excellent!!! Now I can have an "image free" CSS that works for most possible situations. My "fallback" will be a plain flat background color.

My deepest thanks to tha_watcha for having the patience to help me in my stumbling CSS efforts!!!
👍
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
JP
  • Posts: 398
  • Joined: 08/01/2009
Getting closer to a final new CSS theme now... 😄

Have some trouble with setting the font on the "user was thanked" text though....

Does anyone know how to?

JP attached the following image(s):

He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
tha_watcha
  • Posts: 4083
  • Joined: 06/03/2010
Currently there is now way change the font from your css file.

You can try to add a css class to the div in the DisplayPost.ascx file in the controls folder

<div id="<%# "dvThanks" + DataRow["MessageID"] %>" class="ThanksFrom">
            <asp:Literal runat="server" Visible="false" ID="thanksDataExtendedLiteral"></asp:Literal>
        </div>

UserPostedImage
JP
  • Posts: 398
  • Joined: 08/01/2009
Bloody excellent, thank you for leading me in the right direction! 👍

However, that was not the correct statement in the DisplayPost.ascx - but very close....

After some testing - I changed this:
Quote:


<td style="padding: 5px;" colspan="2" valign="top">
<div style="font-weight: bold;" id="<%# "dvThanksInfo" + DataRow["MessageID"] %>">
<asp:Literal runat="server" Visible="false" ID="ThanksDataLiteral"></asp:Literal></div>
</td>



Into this:
Quote:


<td style="padding: 5px;" colspan="2" valign="top">
<div id="<%# "dvThanksInfo" + DataRow["MessageID"] %>" class="ThanksFrom">
<asp:Literal runat="server" Visible="false" ID="ThanksDataLiteral"></asp:Literal></div>
</td>



Modified CSS with (used sharp green to see what element is affected...):

.yafnet .ThanksFrom  {font-size: 8pt; color: #00ff00;}


...and then some magic happened.... 😁

My deepest thanks for bearing with me and my questions... 😄

Maybe this mod could go into the DisplayPost.ascx also for the 1.9.6 final?
JP attached the following image(s):

He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
tha_watcha
  • Posts: 4083
  • Joined: 06/03/2010
I added 3 css classes one for the whole row and one for each div

<tr class="<%#GetPostClass()%> postThanksRow">
    <td style="padding: 5px;" colspan="2" valign="top">
        <div id="<%# "dvThanksInfo" + DataRow["MessageID"] %>" class="ThanksInfo">
            <asp:Literal runat="server"  Visible="false" ID="ThanksDataLiteral"></asp:Literal></div>
    </td>
    <td class="message" style="padding: 5px;" valign="top">
        <div id="<%# "dvThanks" + DataRow["MessageID"] %>" class="ThanksList">
            <asp:Literal runat="server" Visible="false" ID="thanksDataExtendedLiteral"></asp:Literal>
        </div>
    </td>
</tr>

UserPostedImage
JP
  • Posts: 398
  • Joined: 08/01/2009
Great! 👍

Finally I feel like I have given some useful input to the project... 😁
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
JP
  • Posts: 398
  • Joined: 08/01/2009
Well, the prototype of the new theme is now live at the http://m-users.net/forum  ....
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
tha_watcha
  • Posts: 4083
  • Joined: 06/03/2010
Originally Posted by: JP

Well, the prototype of the new theme is now live at the http://m-users.net/forum  ....



Looking good so far, but the Css Gradient Properties for opera are wrong

it should be

and not

background: -o-linear-gradient(top, #ff0000, #330000);	


background: -o-linear-gradient(linear, left top, left bottom, from(#ff0000), to(#330000));	


There are also some malformatted values like

.yafnet #yafheader ul.menuAdminList li a:hover
{
    color: dark#cc0000;
}



.yafnet .MultiQuoteButton,
.yafnet a.yaflittlebutton,
.yafnet a.yafcssimagebutton img {padding-right:5px;
    text-decoration: none;
    background-color: #eeeee;
    color: #222222;

}


should be

background-color: #eee;


.yafnet .yafpopupmenu li.popupitemhover {
	background-color: #dddddd;
	color: cc0000;
}
.yafnet .yafpopupmenu li:first-child.popupitemhover {
	background-color: #cccccc;
	-moz-border-radius-topleft:0.3em;
    -webkit-border-top-left-radius:0.3em;
    border-top-left-radius:0.3em;
	
	-moz-border-radius-topright:0.3em;
    -webkit-border-top-right-radius:0.3em;
    border-top-right-radius:0.3em;
	color: cc0000;
}


missing the # for the color value
UserPostedImage
JP
  • Posts: 398
  • Joined: 08/01/2009
Thank you for helping me ironing out my mistakes... Very much appreciated... 😄
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
JP
  • Posts: 398
  • Joined: 08/01/2009
IE is a funny animal... Having some trouble with the userbox showing ok...

Border-top: works fine in the "user signature", but not in the "user box"...
Have put a little red line there as a "design element" which works in FF, Chrome & Safari - but not with IE9... ????

Also the bottom of the userbox (the postTop cell) does not show the defined gradient as the other browsers do...

It's of course "good enough", but I am curious why IE shows border-top on in one situation but not in another... ????


Edit: And Opera 11.26 refuses to do my grey gradients... Minor issue, though, Looks ok with plain BG color too...
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
JP
  • Posts: 398
  • Joined: 08/01/2009
This is not a CSS question really...

Several of my users have expressed the wish to see the original topic poster too in the "Active Discussions" in addition to the last poster. This is because of the fact that users are judging the "Latest post" value also by the topic starter to know if the topic is useful or not for them personally...

My users say that it is how it works in other forums they visit...

I myself would not mind to have the data displayed in the same fashion as the topics are presented in the normal Topics Listing, albeit a bit "leaner"...
He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
JP
  • Posts: 398
  • Joined: 08/01/2009
YAQ - Yet Another Question....

How do I place the "OK" to the right of the search box (and change the label to "Search Now" )... ?

Looks a bit awkward with an "OK" button to the left of the search box at the bottom of a forum category...
JP attached the following image(s):

He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever. [Old Chinese Proverb]
tha_watcha
  • Posts: 4083
  • Joined: 06/03/2010
Quote:

Have put a little red line there as a "design element" which works in FF, Chrome & Safari - but not with IE9... ????



Try to move the line to the end of the css file, looks like its overridden otherwise.

.yafnet .postUser {border-bottom: 1px solid #CC0000}


Quote:

Also the bottom of the userbox (the postTop cell) does not show the defined gradient as the other browsers do...



Same Problem

Quote:

How do I place the "OK" to the right of the search box (and change the label to "Search Now" )... ?

Looks a bit awkward with an "OK" button to the left of the search box at the bottom of a forum category...



Looks like you added you added float left to the buttons, you need to override that for the search button

#ForumSearchDiv .yaflittlebutton {float:right}


And Make sure you put it aver all .yaflittlebutton properties

UserPostedImage
Forum Jump  
  • You cannot post new topics in this forum.
  • You cannot reply to topics in this forum.
  • You cannot delete your posts in this forum.
  • You cannot edit your posts in this forum.
  • You cannot create polls in this forum.
  • You cannot vote in polls in this forum.

About Us

The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

Powered by Resharper Donate with PayPal button

Project Twitter Updates

Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved