Can i fix this.

robertsalisbury · 2014-01-14 11:32:54

Things are moving on nicely. I like the desktop and ipad look but not the iphone. Is there any way to have a cropped version of the header and also something happens to the drop down menu where the box's don't seem to scale down and have loads cropped off. I've checked and un checked all the mobile boxs in the temps I can find.
www.catchlightimaging.com.au. don't look too much at the content as the galleries need to be finalised. I'm just trying to get the site to function first.

Cheers

Rob

rod barbee · 2014-01-14 14:07:49

about the header, you can feed different versions depending on the browser width:
http://ce3wiki.theturninggate.net/doku. … _mastheads

As to the collapsible menu items getting cut off, try reducing the Padding-left/right in Navigation Container, under Core Width.

Matthew · 2014-01-14 16:37:03

I don't think the Core Width is the problem. I'm having a difficult time actually locating your changes, but the problem seems to be whatever code you've added to create the centered drop-down menu. You will need to "reset" your changes using media-queries to restore proper layout for the mobile navigation.

Matthew · 2014-01-14 16:40:04

I found the problem. It's because you faked the centering using 125px of padding on either side. That is NOT the way to center an object. So yes, as Rod said, you will need to kill that padding.

robertsalisbury · 2014-01-14 17:20:07

How do i centre the nav bar? and what are media queries? Also is there an easy way to change and dupe settings. It seems as though every time you need to change something and sync all the temps you then you have to upload all the files again and re do all the md text etc. I'm sure this is really simple for most people on here as building a house is to me, but this is my first go.

cheers

rob

Last edited by robertsalisbury (2014-01-14 20:43:23)

rod barbee · 2014-01-14 23:24:29

Media queries are in the css, they apply styling to certain media and to the width of that media. So for instance, if the max-width of a device is 480px (like an iPhone) it will be served different css than, say, a 1600px wide desktop monitor.
https://developer.mozilla.org/en-US/doc … ia_queries

On centering drop-down menus: http://community.theturninggate.net/post/10035/#p10035

Also is there an easy way to change and dupe settings

Use the Template Browser to save settings
For text in text blocks that I know I'm going to be using a lot, I'll save it in a text editor (Notepad ++) so I can access it whenever needed.

robertsalisbury · 2014-01-14 23:48:00

Is this "On centering drop-down menus: http://community.theturninggate.net/post/10035/#p10035" to centre the main nav titles to the nav container and not the actual drop down boxes? So that I don't have to use the padding left/right sliders to centralise the titles.

rod barbee · 2014-01-15 00:07:52

it centers the main nav item in the navigation menu. Matthew's example was for four items in the nav menu. It has a total width of 600 px and each menu item has a width of 150px. You can set your widths to whatever you need to accommodate the number of menu items you have.

Using custom css, you'll need to target the specific ul and li items in the navigation div.

robertsalisbury · 2014-01-15 01:05:25

ok sort of get that. This code would be put into each template? is this in the custom css file in the plugins folder?

somewhere in this lot?

/* DELETE THIS LINE
// SITE-WIDE "DROP-DOWN" NAVIGATION MENU
// This function establishes a site-wide navigation menu using pseudo-absolute URLs -- portable, domain agnostic, and without the location limitations of relative URLs
// Serves as an example of a function being applied globally
function ttg_header_navigation( $style, $path ) {
echo '
<div id="navigation" class="tab-content clearfix">
<div class="mantle clearfix">
<div class="core clearfix">

<li><a href="/galleries.php">Galleries</a>
<ul class="sub-menu clearfix">
<li><a href="#">Album Title</a></li>
<li><a href="#">Album Title</a></li>
<li><a href="#">Album Title</a></li>
</ul>
</li>

<li><a href="blog/">Blog</a></li>
<li><a href="/services.php">Services</a></li>
<li><a href="/info.php">Info</a></li>
<li><a href="/about.php">About</a></li>
<li><a href="/contact.php">Contact</a></li>
</ul>

</div>
</div>
</div>

';
return false; // Replaces normal menu
} // END
DELETE THIS LINE */

Last edited by robertsalisbury (2014-01-15 01:09:32)

rod barbee · 2014-01-15 01:19:45

no, that's in the phplugins.php file
you'd do it with custom css (which goes in the /phplugins/css/ folder)
http://ce3wiki.theturninggate.net/doku. … custom_css

but you'll need to get specific with the selectors so that you only target the <ul> and <li> items in the nav menu and not effect any other list items that may be roaming around your site.

robertsalisbury · 2014-01-15 09:27:19

Hand holding please. So at the moment the css/folder is blank. I put this new code
ul { ?does something go here?
margin: 0 auto;
width: 600px;
}

li { ? and here?
float: left;
width: 150px;
}
in that folder with the px values as needed.

"but you'll need to get specific with the selectors so that you only target the <ul> and <li> items in the nav menu" where is this information kept? Also I need to do this for every temp... gallerie..theme. auto index..cart etc?
Please if you could be very specific in plain( i'm a builder English), that would be great. I've been looking at this screen for the past 3 1/2 weeks and i'm getting confused again. Once i've done it once i should be ok.

Cheers

Rob

when I implement the custom functions it says that I need to do this for every plug in. I can only find 1 plugin.php file to edit in the galleries folder?

Last edited by robertsalisbury (2014-01-15 09:38:13)

rod barbee · 2014-01-15 10:35:13

the custom.css file will be applied to all pages that have phplugins enabled. You need to do that in each plug-in: Pages, Gallery, etc.
For those pages already online, you'll need to enable phplugins, re-export, and upload. For everything but Pages, you just need to upload the index.php file from the export.
For Pages, index.php, galleries.php, info.php, etc, upload all of those.

So if you haven't already done that, first set things up for phplugins so that all your pages will be fed the custom.css file.
You won't need to modify the phplugins.php file for every single page. Because you're setting each page up with the server path to phplugins, that means each page will be fed the same phplugins "stuff".

And be sure to enable custom css in the main phplugins file (the one you'll export with Pages)

Hand holding please. So at the moment the css/folder is blank. I put this new code
ul { ?does something go here?
margin: 0 auto;
width: 600px;
}

No, just use as is.

"but you'll need to get specific with the selectors so that you only target the <ul> and <li> items in the nav menu" where is this information kept?

Basically, in the page itself. But you need to learn how css selectors work before you can recognize what you're looking for.

I'll have to take a closer look, and I haven't tested this, but I think it might be:

.sf-menu ul {
margin: 0 auto;
width: 600px;
}

and

.sf-menu li {
float: left;
width: 150px;
}

maybe Matt will come along and either confirm or correct this.

robertsalisbury · 2014-01-15 11:56:35

Last go as the computer is about to leave the building!
from the begining.
1 Wordpress and Wordpress theme installed
2 Auto index -lightroom and labelled galleries then uploaded to server
3 gallerys- in lightroom
4 publisher- lightroom and then uploaded gallery temp and auto index uploaded to server.
5 cart- installed in server.

all the above have been hacked and dupped with the phpplugins box checked and path pinged etc.

Removed the "delete this lines" from the phplugins.php file to enable custom functions.

out of all the above I can only find one css folder in /galleries/phplugins/css. This is empty when i first opened it. I put this code
.sf-menu ul {
margin: 0 auto;
width: 600px;
}
and
.sf-menu li {
float: left;
width: 150px;
}

In there ( i can adjust px later)?

As I say I can only find one css folder. Did this and nothing happend to the nav menu but my galleria slide show stopped working. just had the loading spinning wheel running.
As you say your not sure if the code is correct but is this in the correct ball park of what to do?

Cheers

Matthew · 2014-01-15 13:02:56

You need to setup a common location for PHPlugins, where all assets will reference it. This is explained in the documentation, and if you're running the Blog & Galleries bundle, then setup of PHPlugins was a part of the process outlined in that tutorial:
http://ce3wiki.theturninggate.net/doku. … _publisher

If that's all done correctly, then you will indeed be working within the /galleries/phplugins/ folder. Within the phplugins.php file, make sure that the function for your custom.css file correctly references the location of that file on your server.

If all of that is setup correctly, then you should be able to test your custom.css to ensure that it's working. For example, force your background-color to red, as in the Custom CSS article:
http://ce3wiki.theturninggate.net/doku. … custom_css

robertsalisbury · 2014-01-15 14:03:05

Hi Mathew.

This is where on blue host my css folder is public_html/galleries/phplugins/css. this is the server path in lightroom after ping my phpplugin /home5/catchli8/public_html/galleries/phplugins. I followed all the doc on installation. I have just tried body { background-color: red; } nothing happens. I have also done this to change masterhead which is in the css file at the address above. Nothing works. The image for the mobile is a square logo but nothing changes.
www.catchlightimagin.com.au

html #masthead .mantle {
padding: 32px 24px 24px;
}
html .logo {
background-image: url(/phplugins/images/logo_hd_1100x192d.png);
height: 192px;
}
@media
screen and (-moz-min-device-pixel-ratio: 2),
screen and (-o-min-device-pixel-ratio: 2/1),
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2)
{
html .logo {
background-image: url(/phplugins/images/logo_hd_2200x384.png);
background-size: contain;
}
}
@media
screen and (max-width: 992px)
{
html #masthead .mantle {
padding: 24px 20px; /* optionally adjust padding around the masthead */
}

html .logo {
background-image: url(/phplugins/images/logo_hd_550x96.png);
height: 96px; /* height of standard-res image for tablets */
}
}

@media
screen and (max-width: 992px) and (-moz-min-device-pixel-ratio: 2),
screen and (max-width: 992px) and (-o-min-device-pixel-ratio: 2/1),
screen and (max-width: 992px) and (-webkit-min-device-pixel-ratio: 2),
screen and (max-width: 992px) and (min-device-pixel-ratio: 2)
{
html .logo {
background-image: url(/phplugins/images/logo_hd_1100x192.png);
background-size: contain;
}
}
@media
screen and (max-width: 600px)
{
html #masthead .mantle {
padding: 24px 20px; /* optionally adjust padding around masthead */
}

html .logo {
background-image: url(/phplugins/images/logo_hd_275x237square.png);
background-position: center center; /* center align the masthead on Phones */
height: 237px; /* height of standard-res image for phones */
}
}

@media
screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2),
screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2/1),
screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2),
screen and (max-width: 600px) and (min-device-pixel-ratio: 2)
{
html .logo {
background-image: url(/phplugins/images/logo_hd_550x474square.png);
background-size: contain;
}
}
body { background-color: red; }

Last edited by robertsalisbury (2014-01-15 14:05:57)

rod barbee · 2014-01-15 14:16:20

your custom css isn't even being applied.

I can see where your custom.css file is: http://catchlightimaging.com.au/galleri … custom.css
I don't see the new code in there though. But it's in the ball park. Once you get it in there and get the correct path to the file set up, then you'll know if it's working

but your page is trying to call the css from /phplugins/css/custom.css, which doesn't exist.
so change the path to your custom css in the phplugins file to /galleries/phplugins/css/custom.css

your Galleria slide show is running fine for me. Nice images, by the way.

robertsalisbury · 2014-01-15 14:50:37

Thank you.
I don't understand. when I click on that link above I can see all the code i've pasted in?

My head hurts so i'm probable missing something simple here but how do I change the path to your custom css in the phplugins file to /galleries/phplugins/css/custom.css because it looks all the same to me. Is where the page is looking not just further into the folder structure than the bold bit. The lightroom bit says that path. When I click on the folders to go further in on blue host file editor the file structure looks just like that that you have shown.
Tired!!!!

Matthew · 2014-01-15 14:57:10

In the activated PHPlugins function, in phplugins.php, this line specifies the location of your custom.css file:

    <link rel="stylesheet" href="/phplugins/css/custom.css" />

If you don't update that location to be correct for your setup, then none of this will work at all. Set the location as Rod has indicated above.

robertsalisbury · 2014-01-15 15:09:21

somethings happened. I've lost all my masterhead?

robertsalisbury · 2014-01-15 15:12:43

backgrounds gone red. so thats something positive out of the last 2 days!! ha ha!

Matthew · 2014-01-15 15:16:47

Great. Now that it's working, you can scrap the red.

For the masthead, use the tutorial. Go through the code and update the file locations for your masthead images. For example, I imagine this is probably wrong:

    background-image: url(/phplugins/images/logo_hd_1100x192d.png);

robertsalisbury · 2014-01-15 15:19:38

that would be galleries/phplugins/images/logo_hd_1100x192d.png); in the css file then? sorry for being thick just don't want to be going backwards again.

Thanks for the help though.

Last edited by robertsalisbury (2014-01-15 15:25:12)

robertsalisbury · 2014-01-15 15:32:56

Nothings happening.

Matthew · 2014-01-15 15:39:30

Probably:

/galleries/phplugins/images/logo_hd_1100x192d.png

The leading slash is important. But I don't know where you've put things; it's your server. I can only guess.

robertsalisbury · 2014-01-15 15:52:13

Stay with me please i may fall!

I've put them here public_html/galleries/phplugins/images as in the instructions All of these, I dump into a folder on my web server, /phplugins/images/.

Community @ The Turning Gate

#1 2014-01-14 11:32:54

Can i fix this.

#2 2014-01-14 14:07:49

Re: Can i fix this.

#3 2014-01-14 16:37:03

Re: Can i fix this.

#4 2014-01-14 16:40:04

Re: Can i fix this.

#5 2014-01-14 17:20:07

Re: Can i fix this.

#6 2014-01-14 23:24:29

Re: Can i fix this.

#7 2014-01-14 23:48:00

Re: Can i fix this.

#8 2014-01-15 00:07:52

Re: Can i fix this.

#9 2014-01-15 01:05:25

Re: Can i fix this.

#10 2014-01-15 01:19:45

Re: Can i fix this.

#11 2014-01-15 09:27:19

Re: Can i fix this.

#12 2014-01-15 10:35:13

Re: Can i fix this.

#13 2014-01-15 11:56:35

Re: Can i fix this.

#14 2014-01-15 13:02:56

Re: Can i fix this.

#15 2014-01-15 14:03:05

Re: Can i fix this.

#16 2014-01-15 14:16:20

Re: Can i fix this.

#17 2014-01-15 14:50:37

Re: Can i fix this.

#18 2014-01-15 14:57:10

Re: Can i fix this.

#19 2014-01-15 15:09:21

Re: Can i fix this.

#20 2014-01-15 15:12:43

Re: Can i fix this.

#21 2014-01-15 15:16:47

Re: Can i fix this.

#22 2014-01-15 15:19:38

Re: Can i fix this.

#23 2014-01-15 15:32:56

Re: Can i fix this.

#24 2014-01-15 15:39:30

Re: Can i fix this.

#25 2014-01-15 15:52:13

Re: Can i fix this.

Board footer