A stunning theme required

To talk about everything
User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

A stunning theme required

Post by axew3 »

This site is basic, with default themes, it is time to improve it and give it the proper (very cool) dress ... you know something fascinating that anyone like to have ...
So i wonder someone could me indicate some of best www around examples that can inspire?

Goofkop
User www
User www
Posts: 64
Joined: Sun Feb 26, 2017 8:33 am

Re: A stunning theme required

Post by Goofkop »

A forum theme you mean?

https://themeforest.net/search?utf8=✓&t ... r=homepage

Here you can find many themes.
I have buy https://themeforest.net/item/bboots-htm ... 7?s_rank=4

The second best rated theme which you can buy

User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

:) yes i know well it, i need to be inspired, and do one w3all theme!
Yes thank seem a good place ... i will see to make wp if possible, not so equal, as ever seen/is, about elements on page

User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

i've start without any hint, and avoiding to copy others,
like an "insuperable clonator"- :twisted:

i can reproduce at pixel anything ... but i'm not a graphic ... i only know how to use photoshop at (i think) 80% ... htlm/css maybe some more (at memory), but i'm not a graphic designer :(

Thinking to what better for this site that mainly speak about programming, why not to make it very simple and clean?
I've remember a clean, very old vB style, of vBulletin version 2. Anybody remember the violet/blue color?

on spare time i'll going on on this and i'll publish here online the going on template, available for registered users to be set as template on this forum.
The prosilver is very easy to be changed into whatever you need. I'll try to leave him as more similar to default, hoping also to a better result :roll:

User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

so this is just a test for custom modification, using pure CSS tricks and 5 divs added to space elements.
No more.
I have prefer to not edit any phpBB template file and his structure. It is under construction ...

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

axew3 wrote:
Mon May 22, 2017 11:06 am
so this is just a test for custom modification, using pure CSS tricks and 5 divs added to space elements.
No more.
I have prefer to not edit any phpBB template file and his structure. It is under construction ...
You may know this already, but if not..

You can create a child theme basically, based from the prosilver pphpBB comes with. I have done with with my site, named my theme w/e I wanted, and assigned it to read all prosilver files. If I want to edit a prosilver file, I simply copy it to my desktop, do my edits, and upload my edited file to my child theme directory, it will then be read over the parent directory. All it takes in your child directory (FYI:using the same file structure as prosilver!!) is a style.cfg file containing:

Code: Select all

#
# phpBB Style Configuration File
#

# General Information about this style
name = TopFew
copyright = © thetopfew.com, 2017
style_version = 3.2
phpbb_version = 3.2

# Defining a different template bitfield
# template_bitfield = lNg=

# Parent style
# Set value to empty or to this style's name if this style does not have a parent style
parent = prosilver
From there, I made my edits to any template file I needed, and added a custom.css files and load in in your header. Pretty simple mate, but plenty time consuming! Especially when you start checking mobile screens.

I have personally customized my entire phpBB theme, based on Prosilver and PBtech3.1. Feel free to use any CSS tricks you find on my site. I disabled right-click for guests, tho, gotta login to inspect. Here is a snippet from some of the cssmagic I collected:

Code: Select all

.postprofile .avatar img {

   display: block;
   -moz-transition: all 1s ease;
   -webkit-transition: all 1s ease;
   left: 0px;
   top: 0px;
   max-height: 60px;
   max-width: 60px;
   -webkit-border-radius: 6px;
   -o-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}

.postprofile .avatar img:hover {

   left: -40px;
   top: -40px;
   max-height:140px;
   max-width:140px;
   box-shadow: 0 0 10px #77c1ff;
   z-index: 10;
   -webkit-border-radius: 6px;
   -o-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}
Try that on your phpBB. :)
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

Ok! yes it is the way, this online is the first short try out about old css knowledge!
So i try to use pure css to achieve the correct result about columned colors as i would like to see. The second version is coming soon.
But there is a but. Maybe i'm redundant when i say another time ....
why templates authors are using li ul dt dd etc elements, and not TABLES?
Many css properties are experimental for these elements, and any solution to try to vertical align an element in the correct way inside a dd or another nested element, lead to different problems (as is the structure of the template) which do not have for all browsers a good solution. In table elements it is just ... vertical align, that any browser understand. More: table elements EVER match the dimension of others, when screen dimension change. And you do need to care about a dd that not fill completely his background when height increase due to window size changes.

Really this is a thing mysterious to me ...
Why to use definition lists in place of comfortable and working tables?

I will follow improving, searching for the perfect way without change any template file (until now i've fail, and tables in place of lists (that is easy to switch to into template files and apparently seem to be the only perfect way to me)) and have only via CSS the perfect solution for columned colors.

The actual pseudo code on my localhost that is little different from first here online, that work without edit any change into template file is this (look that my pseudo code :) +- ever need to be resumed, in fact some declarations can be unified into one here):

Code: Select all

/* START - w3all change zebra into columns colors */
@media screen and (min-width: 43.750em) { /* 700px */
	
div.forabg div.inner ul.topiclist.forums li.row dl.row-item.forum_unread_subforum dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}	
	
div.forabg div.inner ul.topiclist.forums li.row dl.row-item{
background-color:#f5f5f6;
min-height:50px;
overflow: auto;
padding-bottom:0px;
}

div.forabg div.inner ul.topiclist.forums li.row dl.row-item dt{
min-height:50px;
display: inline-block;
padding-bottom:0px;

}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.posts{
min-height:50px;
display: inline-block;
padding-bottom:0px;
}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.topics{
background-color:#dcddde !important;
min-height:50px;
display: inline-block;
padding-bottom:0px;
}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:50px;
display: inline-block;
padding-bottom:0px;
}

}
/* END view forum index */

@media screen and (min-width: 43.750em) { /* 700px */
	
div.forumbg div.inner ul.topiclist.topics li.row.bg1{
	background-color:transparent !important;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2{
background-color:transparent !important;	
}


div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item{
background-color:#f5f5f6 !important;	
min-height:45px;
overflow: auto;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item{
background-color:#f5f5f6 !important;	
min-height:45px;
overflow: auto;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt{
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt{
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt div.list-inner,
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.posts{
background-color:#dcddde !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.posts{
background-color:#dcddde;		
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.views{
background-color:#f5f5f6 !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.views{
background-color:#f5f5f6 !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

/* about sticky */
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.posts{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.posts{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.views{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.views{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.lastpost{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.lastpost{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item{
background-color:#ffffff !important;
min-height:45px;

}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item{
background-color:#ffffff !important;
min-height:45px;

}

}
/* END - w3all change zebra into columns colors */
note the first:

Code: Select all

div.forabg div.inner ul.topiclist.forums li.row dl.row-item.forum_unread_subforum dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}	
and the second

Code: Select all

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt div.list-inner,
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}
which are the point: this the way to not let list elements increase their height on resizing browser. The resize and subsequent text wrap on elements increase height and the background for one of these, never match the new height (so the background color result on half element and not into all the element.
Well my Eng is even more bad than the css example above, so i hope my explanation can be understand!

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

I'm sure your explanation was fine. Perhaps I misunderstood what you were looking for.. I thought you were interested in customizing your own theme.

About your English, I do have some troubles understanding your English, HOWEVER.. I applaud you even more for using English because you're smarter than me, it's the only language I know! ;) Practice makes perfect, and trust me, English is NO perfect language! I think you're learning great! :)

About your last post, (and after you mentioning before about this I think), using tables with html, creates some css issues? Prolly, I try and stay away from too many tables and use divs. CSS has its pains too, dealing with something like this, all for one thing:

Code: Select all

-webkit-border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
What I think I know is this, tables' real purpose is to deliver formatted data only, otherwise the day of age using tables in html are gone. Divs are more recommended for everything else now purely to control mobile response way better, which explains many authors are moving to this new directive. Everyone uses mobile these days. CSS gives authors more control, since with HTML 5, tables still need there class elements assigns in CSS reguardless. Choosing to use divs over tables (ie. when not displaying data charts), shortens the code that has to load in template files, better supports mobiles & caching more in the users browser. All bonuses in my opinion. However, like pointed out, the CSS can be nasty, when having one line for each browser for certain tricks. Another thing, remember when I was recommending the removal of some of your html like this:

Code: Select all

<table cellspacing=0 border=0>
Just an example, but html5 does not like the border or cell assignments.

Anyways, if I am completely off subject or misunderstood. Sorry. But I enjoy this conversation, because I am ALSO currently rewriting many tables, assigning new classes, in my old 'World of Phaos' game as I also up it to php7. It's a nightmare. Lol..

P.S. I have had this sense for a while, you really don't like changing your style from tables to whatever... and I admire that. Truth is, I didn't know the difference until about Jan of this year.. and I'm still googling and reading information on daily basis, so I can point my coding in the right direction.

Check these out:
Good Info: https://stackoverflow.com/questions/156 ... d-of-table
Neat Converter: https://html-cleaner.com/features/repla ... with-divs/
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

User avatar
axew3
w3all User
w3all User
Posts: 2031
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

very nice, yes i will follow ...
the specific problem here, is the nested div inside dl dt, and subsequent dd. You can note very well this also into the default phpBB template: the border of the dd column about Topics, display a border shorter than others.
When the div inside resize, there is no way to make change the height of the dd to match the height of the dt that increase maybe, due to browser resize.
This the meaning of the 2 CSS points above:
wrap NOWRAP
and
text overflow hidden.

Would like to know if anybody, with pure CSS is able to resolve this. This what i'm aiming to.

The code i refer to into phpBB template files is on forumlist_body.html (and/or on viewforum_body.html):

Code: Select all

<li class="row">
			<!-- EVENT forumlist_body_forum_row_prepend -->
			<dl class="row-item {forumrow.FORUM_IMG_STYLE}">
				<dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
					<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"></a><!-- ENDIF -->
					<div style="" class="list-inner"> ...

... ... ...

Code: Select all

</dt>
				<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
				<dd class="lastpost">
					<span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
						<!-- IF not S_IS_BOT -->
							<a href="{topicrow.U_LAST_POST}" title="{L_GOTO_LAST_POST}">
								<i class="icon fa-external-link-square fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">{VIEW_LATEST_POST}</span>
							</a>
						<!-- ENDIF -->
						<br />{topicrow.LAST_POST_TIME}
					</span>
				</dd>
			</dl>
p.s
I applaud you even more for using English because you're smarter than me
thank you but this is merely your opinion ... not mine! :lol: :lol:

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

Thanks for that reference. Without editing the templates, I'm not sure if you can accomplish what you want without editing template(s). I can tell you for fact, Prosilver 3.2 wasn't 100% perfect, even I submitted a fix to area51.phpbb on the 3.2 template for some backwards FA icon I found after their release of RC.

I feel your frustration mate. Perhaps phpBB used a div there to min/max the size, not sure. I've checked if div was valid child of dt.. I think you're on to something! Perhaps a suggestion to phpBB for a future fix is in order, as I'm unsure how to accomplish PURE CSS the way that it is now, I totally get what your saying.

Ref: https://developer.mozilla.org/en-US/doc ... lement/div

EDIT: I just spent another hour looking for a resolve.. thought I had something, but can't find a pure css solution. Not with the <dt> elements. However there is (as you know) a solution for tables... ha.

Also stumbled across: https://developer.mozilla.org/en-US/doc ... ible_boxes
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

Post Reply