Placing Image as separator for Categories Blocks

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Get Involved
sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Placing Image as separator for Categories Blocks

Post by sgtevmckay » Fri Feb 19, 2016 7:40 am

I need to know the code for automatically placing a separator image between Categories.

I want to use this image:
Image
Between categories, but as I build my forum and categories, I do not want to go in and code between each category, every time I add a category.

I have seen a small handful of styles that do this, but can not seem to find the code in the style or its placement in the CSS or Body html

Additionally; all of my searches seem to bring up placing a single image, or advertisement. bwtween a single category, so this does not match with what I am looking to do.

:(

Any help would be greatly appreciated
Last edited by sgtevmckay on Sun Feb 21, 2016 5:55 am, edited 1 time in total.

User avatar
david63
Registered User
Posts: 16328
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Placing Image as seperator for Categories

Post by david63 » Fri Feb 19, 2016 8:39 am

I haven't looked into the code but if you want to do it automatically for every category (depending on how many categories you have) using a template event and a small extension may be the way to go.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Placing Image as seperator for Categories

Post by Arty » Fri Feb 19, 2016 9:07 am

Add this to css

Code: Select all

.forabg + .forabg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
    height: 100px;
    background: url('https://dl.dropboxusercontent.com/u/1016357/Fabricated%20Sanity/U6MJITSGPOO81402093138183.png') 50% 50% no-repeat;
}
.forabg + .forabg {
    margin-top: 100px;
    position: relative;
}
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as seperator for Categories

Post by sgtevmckay » Fri Feb 19, 2016 7:28 pm

Arty....Wow
I am honored......many of the sites I Admin for are your hard work, and it is greatly appreciated
Thank you

At the expense of seeming an idgit.....
Which CSS should I look into?

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Placing Image as seperator for Categories

Post by Arty » Fri Feb 19, 2016 11:05 pm

Thanks. Placement of that code depends on style.

For prosilver you can put it in theme/common.css, for other styles that have only 1 css file put it in that css file. If you are using one of my styles, put it in theme/_custom.scss and recompile stylesheet. Code should be appended at the end of file.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as seperator for Categories

Post by sgtevmckay » Sat Feb 20, 2016 12:16 am

I have tried the code on all 4 of my styles, including the default style and I am not getting an changes, in fact it looks like the code is doing nothing at all .

This could be me doing something way way wrong

You are welcome to take a look.
please be gentle, small home server sandbox, with limited bandwidth
http://gated.ddns.net/PhPBB3/index.php

appreciate your time once again

User avatar
Lumpy Burgertushie
Registered User
Posts: 66483
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Placing Image as seperator for Categories

Post by Lumpy Burgertushie » Sat Feb 20, 2016 1:14 am

are you recompiling the style after making your changes?

that is something you have to do on arty's styles. I have no idea how to do it, but it is not the same thing as refreshing the template/theme etc.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as seperator for Categories

Post by sgtevmckay » Sat Feb 20, 2016 1:29 am

Hiya Lumpy....good to hear from you again :D


This is NOT one of Arty's styles, this is a style from PhPBB DE site.
https://www.phpbb.de/community/viewtopi ... 4&t=235470

The style claims to be based on the default Prosilver style and for the most part it is, once you get past the frame work and fancy borders ;)

It is my intention to learn coding, as time permits, and maintain this forum style.
So hopefully I will be a good student :oops:
Last edited by sgtevmckay on Sat Feb 20, 2016 1:47 am, edited 1 time in total.

User avatar
3Di
Former Team Member
Posts: 13917
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Placing Image as seperator for Categories

Post by 3Di » Sat Feb 20, 2016 1:31 am

Just looking at the Arty's signature, to recompile Arty's styles stylesheets there is an extension: http://www.artodia.com/threads/sass-com ... -3-1.2186/
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

User avatar
Talk19Zehn
Registered User
Posts: 345
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Placing Image as seperator for Categories

Post by Talk19Zehn » Sat Feb 20, 2016 2:07 pm

Hi, I do not know if I understand your plan properly.
For the code written by Arty use the additional.css. I think, his code set your image between all categories.

Do you want to proceed separately, load the original forumlist_body.html from prosilver into the template directory. Please use also the additional.css and perhaps use this tutorial:
http://www.christianbullock.com/2011/ph ... categories

If you want to change your logo, change it directly into the overall_header.html
<img src="{T_THEME_PATH}/images/site_logo_3_1.jpg" alt="" />
and please change inside only this -> site_logo_3_1.jpg to the imagename which you are using. Your logo is in directory theme / images (!). Your logo should not be too large, it is a better way ...

Clear all caches, so also the browsercaches.



Now I find a couple of mistakes in this style. If you perform changes, use after the validation at W3C.... ;)

Best regards
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as seperator for Categories

Post by sgtevmckay » Sun Feb 21, 2016 5:48 am

@ Talk19Zehn thank you, as you are the last style creator of the Conan style, your help would be greatly appreciate.

let me see if I can explain better

I want to use this image :
Image

and have the image used as a visual separator for all category blocks:

Image

Similar to the way the graphic is used between the category blocks in the xmasgold style

Image

but, to have it so the image is placed dynamically ( created in each area between blocks) with out having to introduce a separate code between every category.
If I create a new Category in xmasgold style the wreath image is automatically placed.

hoping to do the same with the wooden image above in the Conan style.

User avatar
Talk19Zehn
Registered User
Posts: 345
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Placing Image as separator for Categories Blocks

Post by Talk19Zehn » Sun Feb 21, 2016 7:48 am

Hello, no the code of Arty is correct. I do not have those errors, that you are describing. There must be a conflict, which may related to an extension.
Disable (disable Only (!)), the extensions step by step and check it again.

additional.css
Your image is into the directory theme / images (!).

Code: Select all

.forabg + .forabg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
    height: 100px;
    background: url("./images/betweencatimage.png") 50% 50% no-repeat;
}
.forabg + .forabg {
    margin-top: 100px;
    position: relative;
}



Regards


.... for this style hint please consider the copyrights and licenses ;)
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as separator for Categories Blocks

Post by sgtevmckay » Sun Feb 21, 2016 7:54 am

Just to verify:

put code into "additional.css" and not in "common.css" ?

User avatar
Talk19Zehn
Registered User
Posts: 345
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Placing Image as separator for Categories Blocks

Post by Talk19Zehn » Sun Feb 21, 2016 8:06 am

Hint: --> the directories into the stylesheet.css be processed in order, which you listed them!!
Graphic based on Artys code:
betweencatanimage.jpg

Edit: --> Another way - example, not a finished code ....
TEST

additional.css

Code: Select all

.betweencatimage {
	background-image: url("./images/catbetweenanimage.png");
	background-repeat: no-repeat;
	width: 600px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
	.betweencatimage {
	display: none;
	}
}

Set the original forumlist_body.html (your phpBB-version) into the template directory(!)
forumlist_body.html
search

Code: Select all

	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
change

Code: Select all

	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="betweencatimage">&nbsp;</div><div class="forabg">

My last version is phpBB-3.1.7pl1.
Last edited by Talk19Zehn on Sun Feb 21, 2016 9:24 am, edited 1 time in total.
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme

sgtevmckay
Registered User
Posts: 200
Joined: Tue Apr 27, 2010 4:32 am
Contact:

Re: Placing Image as separator for Categories Blocks

Post by sgtevmckay » Sun Feb 21, 2016 9:21 am

My last version is phpBB-3.1.7pl1.
Indeed....I believe that is the version I have downloaded and am working with.
And....I thank you for it, was the start of seeing some of the more inventive forums make a return.

Me and my Guild Mates Thank you


As it is very late here and I am mentally exhausted, I will work out the code inputs later today.
I will if advise if works

Thank you again

Locked

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