What style is this?

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Ibedejo
Registered User
Posts: 243
Joined: Tue Feb 21, 2012 12:12 am

Re: What style is this?

Post by Ibedejo »

fliper4o wrote: Tue Aug 22, 2017 12:30 am Any difference?
After some tweaking => no.

Original Love forum at 1600x900
1600x900.png
Original Love forum at 800x600
800x600.png
Original Love forum at 600x800
600x800.png
You see the difference?
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Ibedejo wrote: Tue Aug 22, 2017 7:12 am
fliper4o wrote: Tue Aug 22, 2017 12:30 am Any difference?
After some tweaking => no.
Image
Please be more carefully while reading, do you read the topic(whole, full) yet?
I was comparing the nav bar & the nav bar ext.
When there are more then 1 images, they not shrink but overlap. Obviously.
Tip: Check pre-last sentence from the post u've quoted.

Gracias!
User avatar
Ibedejo
Registered User
Posts: 243
Joined: Tue Feb 21, 2012 12:12 am

Re: What style is this?

Post by Ibedejo »

Social competence has become a virtue of the past, I guess ...
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Ibedejo wrote: Mon Aug 21, 2017 3:59 pm Are you trying to create an exact 1:1 copy of the style (or, at least, of the header) you referred to here?
Yes, I do.
User avatar
Ibedejo
Registered User
Posts: 243
Joined: Tue Feb 21, 2012 12:12 am

Re: What style is this?

Post by Ibedejo »

fliper4o wrote: Mon Aug 21, 2017 7:24 pm
Ibedejo wrote: Mon Aug 21, 2017 3:59 pm Are you trying to create an exact 1:1 copy of the style (or, at least, of the header) you referred to here?
Nope.
I respect & like the original Love forum style !
Make up your mind about what you really want to do ...

In case your plans include the same images in the header as in thy style you linked to: you may re-think the "I respect" part of your previous answer. Create your own images/logo and you're on the safe (and: respectful ...) side.
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Are you kidding me!?
In case you're fallin' from Mars or u've enjoyed the Solar Eclipse :geek: like Trump. //no offence man, just kidding ;)
So, I never meant that I want to copy-pasta the Love forum to my "own". Often I like something, somewhere & I would like to try it on my own just to see how it will look & work. Later I change, edit it, like something else & give it a try again & so on & so on...
Appliqué - is a sewing technique that involves stitching a small piece of fabric onto a larger one to make a pattern or design.
The (2) two ideas which catch me are:
  • Forum banner/logo (even 2) as background so that the forum body can stands out separately surrounded by the background itself. Like the body & the background are two different objects which overlap.
  • That simple additional nav bar catch my eye, that simple & innocent buttons + search, extended as a body wrap.
Any questions? :roll:
User avatar
JimA
Former Team Member
Posts: 7833
Joined: Thu Jul 31, 2008 5:54 am
Location: The Netherlands
Name: Jim Mossing Holsteyn
Contact:

Re: What style is this?

Post by JimA »

Warez is not allowed on this board, so I'm closing this topic as well. Additionally, I'll remind you about our rules for respectful posting. Using images or smilies like the above are not the best way to get help.

For any questions or to get the topic re-opened, feel free to PM me.
Jim Mossing Holsteyn - Former Community Team Leader
Knowledge Base | Documentation | Board rules

If you're having any questions about the rules/customs of this website, feel free to drop me a PM.
User avatar
JimA
Former Team Member
Posts: 7833
Joined: Thu Jul 31, 2008 5:54 am
Location: The Netherlands
Name: Jim Mossing Holsteyn
Contact:

Re: What style is this?

Post by JimA »

Topic reopened after contact with the author.
Jim Mossing Holsteyn - Former Community Team Leader
Knowledge Base | Documentation | Board rules

If you're having any questions about the rules/customs of this website, feel free to drop me a PM.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: What style is this?

Post by Hanakin »

1. remove the rounded corners from the wrap

in common.css change this

Code: Select all

.wrap {
    border: 1px solid transparent;
    border-radius: 0 0 8px 8px;
    margin: -5px auto;
    max-width: 1152px;
    min-width: 625px;
    padding: 15px;
}
to this

Code: Select all

.wrap {
    padding: 15px;
}
in colours.css delete this

Code: Select all

.wrap {
    background-color: #FFF;
    border-color: #E6E9ED;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
}
2. add two surrounding divs outside of the wrap so you should have

Code: Select all

<div class="theme-wrap">
    <!-- INCLUDE theme_navbar.html -->
    <div class="theme-contents">
        <div class="wrap">
        </div>
    </div>
</div>
to do this

open overall_footer.html and find

Code: Select all

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
before it add

Code: Select all

    </div>
</div>
then

open overall_header.html and find

Code: Select all

<div id="wrap" class="wrap">
before it add

Code: Select all

<header class="theme-header"></header>
<div class="theme-wrap">
    <!-- INCLUDE theme_navbar.html -->
    <div class="theme-contents">
3. create a new file in the templates folder called theme_navbar.html

in this file place the following code which can be edited to meet your needs for the content of the bar

Code: Select all

<nav class="theme-topnav">
	<a href="/">Home</a>
	<a href="/wiki">Wiki</a>
	<a href="/forums">Forums</a>
	<a href="http://bitbucket.org/rude/love/issues">Issue tracker</a>
	<div id="search-box" class="search-box search-header" role="search">
		<form action="./search.php?sid=d78a574729e8dd0bcc2f3b928a459a5c" method="get" id="search">
			<fieldset>
				<input name="keywords" id="keywords" type="search" maxlength="128" title="Search for keywords" class="inputbox search tiny" size="20" value="" placeholder="Search…">
				<button class="button button-search" type="submit" title="Search">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Search</span>
				</button>
				<a href="./search.php?sid=d78a574729e8dd0bcc2f3b928a459a5c" class="button button-search-end" title="Advanced search">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">Advanced search</span>
				</a>
				<input type="hidden" name="sid" value="d78a574729e8dd0bcc2f3b928a459a5c">

			</fieldset>
		</form>
	</div>
</nav>
4. you will also have to add all the new styles for everything. to do this I recommend creating a theme.css file in your theme folder for all the styles for your theme.

then

in stylesheets.css add to the end

Code: Select all

@import url("theme.css");
5. add the following to the new theme.css file

Code: Select all

nav {
	padding: 1em;
	background-color: #dcefff;
	border-bottom: 1px solid #cadceb;
	border-radius: 5px 5px 0 0;
}

nav a {
	display: inline-block;
	padding: 0.5em 1em 0.5em 1em;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
}

nav a:active,
nav a:link,
nav a:visited {
	color: white;
}

nav a:hover {
	text-decoration: underline;
}

.dark { background-color: #154451; }
.green { background-color: #25b786; }
.blue { background-color: #1e86be; }
.pink { background-color: #da5d86; }

nav a:nth-child(1) { background-color: #154451; }
nav a:nth-child(2) { background-color: #25b786; }
nav a:nth-child(3) { background-color: #1e86be; }
nav a:nth-child(4) { background-color: #da5d86; }

.theme-wrap, .theme-header {
	margin: 0 auto 0 auto;
	max-width: 1100px;
}

.theme-wrap {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
	-moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
	box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
}

.theme-contents {
	background-color: #f8fcff;
	border-radius: 0px 0px 5px 5px;
	border: 1px solid transparent;
}

.theme-header {
	height: 129px;
	background-image: url("./images/love_right.png");
	background-position: bottom right, top left;
	background-repeat: no-repeat, no-repeat;
}
this should get you about 90% of the way the rest is just tweaking and fine tuning
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Hi Hanakin,
thank you for your help!

I've done everything as u written.
Also I don't understand well 4. theme.css "for all the styles for your theme" (What does it mean? I'm using prosilver only) & have done 5.
If I want to use only 1 image logo, I don't mind two ether(for a test purpose)?
Those buttons in 3. theme_navbar.html the color is chosen by...?(by 5. theme.css I guess)

I can see the buttons and the main frame (as how it should look like), but there is some inconsistencies. Can you please check my forum link in the signature and help me to fix some things :)
//If you need some forum files, let me know.

Thank you!
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Can somebody help me, pls?
Image

Image
User avatar
SalazarAG
Registered User
Posts: 677
Joined: Mon Mar 30, 2015 10:48 am

Re: What style is this?

Post by SalazarAG »

fliper4o wrote: Sat Sep 02, 2017 5:55 pm Can somebody help me, pls?
Image

Image
Try this

In common.css, find

.page-body {

Replace all class with:

Code: Select all

.page-body {
    margin: 0 auto 0 auto;
    clear: both;
    width: 82%;}
Find .navbar {

and replace all class with:

Code: Select all

.navbar {
margin: 0 auto 0 auto;
width: 80%;
}
I'm sorry for my English. Google Translator does a bad job. :D
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

Recent: (still not, as how it should be). Better then the last "update", thank you!
Image
  • 2x Search & not fixed on the additional nav bar + without shadow it seems should be
  • white board/wrap/
  • white line between additional nav bar buttons & Board index
>As how it should looks like:
Image
>Mine:
Image
Last edited by fliper4o on Sun Sep 03, 2017 11:41 am, edited 2 times in total.
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o »

some drawings :D Check the post below. Link of my forum in signature. Original forum https://love2d.org/forums/
Image
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: What style is this?

Post by Hanakin »

point 4 I was suggesting to not edit everything into the files that come with prosilver. This is a bad practice. It is best to separate everything that is custom into its own css file to prevent issues when prosilver gets updated. That is what the theme.css file was a new custom file for all the custom css


your issue is that you have not followed my instructions properly.

this is what you have in overall_header.html

Code: Select all

<div class="theme-wrap">
	<nav class="theme-topnav">
		<a href="/">Home</a>
		<a href="/wiki">Wiki</a>
		<a href="/forum">Forum</a>
		<a href="http://bitbucket.org/rude/love/issues">Issue tracker</a>
		<div id="search-box" class="search-box search-header" role="search">
			<form action="./search.php?sid=d78a574729e8dd0bcc2f3b928a459a5c" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="Search for keywords" class="inputbox search tiny" size="20" value="" placeholder="Search…">
					<button class="button button-search" type="submit" title="Search">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Search</span>
					</button>
					<a href="./search.php?sid=d78a574729e8dd0bcc2f3b928a459a5c" class="button button-search-end" title="Advanced search">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">Advanced search</span>
					</a>
					<input type="hidden" name="sid" value="d78a574729e8dd0bcc2f3b928a459a5c">
				</fieldset>
			</form>
		</div>
	</nav>
	<div class="theme-contents">
		<div id="wrap">
		</div>
	</div>
</div>
The issue is that the last three </div> need removed from this file they belong in the overall_footer its hard to recommend where now without access to some sort of git repo for your theme.

add this new css class

Code: Select all

.theme-topnav-search {
    border-radius: 4px;
    display: block;
    float: right;
    margin-right: 5px;
}
then in your html find this in your theme-topnav

Code: Select all

<div id="search-box" class="search-box search-header" role="search">
replace search-header with theme-topnav-search

remove margin-top: 30px;

also undo everything @SalazarAG instructed you to do

you also removed the wrap class from the wrap div, pls add that back
Screenshot 2017-09-03 14.29.09.png
Post Reply

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