The weakest link

For support and discussion related to templates and themes in phpBB 3.3.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

The weakest link

Post by DV1 »

The weakest link

Hi Everyone

So I have placed the following in navbar_header.html:

Code: Select all

<div class="forumname">
	<div class="inner"><span class="corners-top"><span></span></span>

	<ul class="linklist navlinks">
		<li>Forum Name</li>				
	</ul>
			
	<ul class="linklist leftside">
		<li><a href="link" accesskey="h">Link 1</a></li>
		<li><a href="link" accesskey="h">Link 2</a></li>
		<li><a href="link" accesskey="h">Link 3</a></li>
		<li><a href="link" accesskey="h">Link 4</a></li>
			</li>
		</ul>			

			<span class="corners-bottom"><span></span></span></div>
		</div>
		<br />
Along with that is the css:

Code: Select all

.forumname{ font-family: sans-serif;
font-size: 1.5em;
color:blue;
}
And it gives this:

forumname1.png

So far so good. But of course if I change the font-size in the css I get this:

forumname2.png

I want the name larger but not the links. I tried different combinations of ul and li in the css but nothing doing. I thought an extra div but that would space it out vertically.

Probably easy as can be but just not catching it. :-)
You do not have the required permissions to view the files attached to this post.
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: The weakest link

Post by Mannix_ »

Code: Select all

.forumname .linklist.navlinks li {font-size: your size}
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

@Mannix

Looking good. :-)

forumname-3.png

Added this to make the links a little larger:

Code: Select all

.forumname .leftside {
    font-size: 1.2em;
margin-top: -0.5em;
}

Not particularly keen on negative margins but seems to work ok.

Cheers

Daniel
You do not have the required permissions to view the files attached to this post.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

Everything noted in previous posts is successful. What I just noticed is the following:

forumname-c.png

When collapsed to mobile size the menu icon appears for the links. I don't want the menu icon.
What I would like for mobile size is just for the menu links to shuffle under the other as shown here from the older forum:

forumname-d.png

What file and line would be changed for that? Even though it was done on the older forum, I can't remember where.

Thanks
You do not have the required permissions to view the files attached to this post.
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: The weakest link

Post by Mannix_ »

removing the linklist class should be enough
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

This is the html:

Code: Select all

<div class="forumname">
    <div class="inner"><span class="corners-top"><span></span></span>

    <ul class="linklist navlinks">
        <li>Forum Name</li>                
    </ul>
            
    <ul class="linklist leftside">
        <li><a href="link" >Link 1</a></li>
        <li><a href="link" >Link 2</a></li>
        <li><a href="link" >Link 3</a></li>
        <li><a href="link" >Link 4</a></li>
            </li>
        </ul>            

            <span class="corners-bottom"><span></span></span></div>
        </div>

Do you mean change to this? :

Code: Select all

<div class="forumname">
    <div class="inner"><span class="corners-top"><span></span></span>

    <ul class="navlinks">
        <li>Forum Name</li>                
    </ul>
            
    <ul class="leftside">
       <li><a href="link" >Link 1</a></li>
        <li><a href="link" >Link 2</a></li>
        <li><a href="link" >Link 3</a></li>
        <li><a href="link" >Link 4</a></li>
            </li>
        </ul>            

            <span class="corners-bottom"><span></span></span></div>
        </div>

User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: The weakest link

Post by Mannix_ »

yep exactly that
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

That didn't work. I should have taken a screenshot of the result but it looks like when you have a menu and no styling, the menu items text one on top of the other with bullets.

So as I mentioned previously what I had done with the previous forum, I recoded that method and it gave this:

forumname-recode-1.png

It looks good and operational.

I also checked this on actual phone along with desktop collapse:

forumname-recode-2.png

The spacing between lines is around 40px which is good for touch-screen area.

So, it's a simple div with a 'forumname.html' placed at the beginning of the navbar_header.html with:

<!-- INCLUDE forumname.html -->

And the preferred styling either in colours.css or as a 'forumname.css' file.

Cheers
You do not have the required permissions to view the files attached to this post.
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: The weakest link

Post by Mannix_ »

ok let's try this instead on each li element add data-skip-responsive="true" and add this to css .forumname .responsive-menu{display: none;}
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

@Mannix

Well, the one I just described is working good but I don't mind trying this on another test forum for the the fun of coding. :-)

Never had a need to use that element, so is this what you mean?

<li data-last-responsive="true"><a href="link" >Link 1</a></li>
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: The weakest link

Post by Mannix_ »

yes that is exactly what i mean :)
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada

Re: The weakest link

Post by DV1 »

Ok, that works.

1st image desktop, 2nd mobile:

forumname-a.png

forumname-b.png

Will have to move up the links a touch for the mobile and also more of a left margin.

So, two ways of coding it and both work. :-)

In 25 words or less, what does data-skip-responsive="true" do? Where would it be used in other coding instances?

Cheers
You do not have the required permissions to view the files attached to this post.

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