Additional menu links

[Daggers]

Hi Guys

Love the work you have done, Coppermine is just what I needed after I abandoned my forum in favour of the gallery system instead.

I am looking at modifying the overall look of the template I am using which is the Cursinova Theme, I found the option in the theme tab to add a custom link in the left hand menu, but I seem to be only able to add the one link (see photo), I added a link to Facebook.

My question is how do I had more custom external menu links to the left hand menu the same as the Facebook one, also is there an easy way to modify the theme colours without editing the css file.

Keep up the good work.

[allvip]

My question is how do I had more custom external menu links to the left hand menu the same as the Facebook one.

Additional menu items  http://documentation.coppermine-gallery.net/en/theme_examples.htm#theme_examples_content_menu

also is there an easy way to modify the theme colours without editing the css file.

No but css is very easy. CSS Tutorial http://www.w3schools.com/css/default.asp
I can help you edit it if you want. Just let me know how you want it to look, what you want to change.

[Daggers]

Thanks for youre help allvip, I will look at the problem tomorrow, and have a chat with you about modifying the template.

Cheers

Steve

[allvip]

Thanks for youre help allvip, I will look at the problem tomorrow, and have a chat with you about modifying the template.

Cheers

Steve

OK.
Just a tip. In firefox, highlight what you want to change, right click on the page - click Inspect Element.
That will give you the css for want you want to change (see attachmnet css.jpg).

You can edit the style.css with Windows Notepad or Programmer's Notepad Stable: 2.3 Download Portable Edition (no need to install it, very light software and shows the lines number, serach option etc) http://www.pnotepad.org/download/

[Daggers]

Hi allvip

If you could point me in the right direction for the CSS edit I would appreciate that. I have attached two photo's to show what I would like to edit and the new colour numbers. Plus I would like to change the font colour in those mods from white to black.

The page currently looks like menu image 1 and I want to change the colour to menu image 2 and if possible put a gradient on those colours.

Hope you can help me with this, as for the menu links I have found a way to add them in via html 5 edit in the inspect element feature of Chrome but cannot save the alterations. The instructions you guided me too seem to work on other templates but not the one I have chosen.

regards

Steve 

[Daggers]

Forgot the new colour numbers, sorry.

Colour 1 = ded6de

Colour 2 = d5d7de

[allvip]

Open style.css, find:

Code Select Expand


.headerer{
width:100%;
background-color: #222;
height: 30px;

background: #2a5c75;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWM3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2a5c75 0%, #133747 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5c75), color-stop(100%,#133747));
background: -webkit-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -o-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -ms-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: linear-gradient(top,  #2a5c75 0%,#133747 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5c75', endColorstr='#133747',GradientType=0 );

-webkit-box-shadow: inset 0px 3px 9px #171717; /* webkit browser*/ -moz-box-shadow: inset 0px 3px 9px #171717; /* firefox */ box-shadow: inset 0px 3px 9px #171717;
border-bottom: 1px solid #666;
}


Replace all  2a5c75 with ded6de and all 133747 with ffffff. Also replace 171717 with cccccc .


Find:

Code Select Expand


.searchbox {
margin-top: 3px;
float:right;
margin-right: 0px;
width:300px;
background: #2a5c75;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWM3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2a5c75 0%, #133747 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5c75), color-stop(100%,#133747));
background: -webkit-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -o-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -ms-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: linear-gradient(top,  #2a5c75 0%,#133747 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5c75', endColorstr='#133747',GradientType=0 );

}


replace all  2a5c75 with ded6de and all 133747 with ffffff.

Find (for category):

Code Select Expand


.catrow_noalb {
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;

background: #2a5c75;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWM3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2a5c75 0%, #133747 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5c75), color-stop(100%,#133747));
background: -webkit-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -o-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -ms-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: linear-gradient(top,  #2a5c75 0%,#133747 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5c75', endColorstr='#133747',GradientType=0 );

}


and:

Code Select Expand


.catrow {
font-family: Georgia,"Times New Roman" ;
color:#eee;
font-size:16px;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;

background: #2a5c75;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWM3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2a5c75 0%, #133747 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5c75), color-stop(100%,#133747));
background: -webkit-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -o-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -ms-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: linear-gradient(top,  #2a5c75 0%,#133747 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5c75', endColorstr='#133747',GradientType=0 );

}


replace all  2a5c75 with d5d7de and all 133747 with ffffff.

find:

Code Select Expand


.catlink a {
    color : #fff;
text-transform: uppercase;
}


replace with:

Code Select Expand


.catlink a {
    color : #000000;
text-transform: uppercase;
}


find:

Code Select Expand


.catlink {
    color : #fff;
    font-family:'Bree Serif', Helvetica, Arial, sans-serif;
    font-weight:bold;
    display: block;
    margin-bottom: 2px;
text-shadow: 1px 1px 1px #000;
}


delete: text-shadow: 1px 1px 1px #000; or change #000 with #ccc;

find:

Code Select Expand


.footer {
height: 80px;
color:#444;
border-top:1px solid #fff;

background: #2a5c75;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhNWM3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2a5c75 0%, #133747 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a5c75), color-stop(100%,#133747));
background: -webkit-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -o-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: -ms-linear-gradient(top,  #2a5c75 0%,#133747 100%);
background: linear-gradient(top,  #2a5c75 0%,#133747 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5c75', endColorstr='#133747',GradientType=0 );


-webkit-box-shadow: inset 0px 3px 9px #171717; /* webkit browser*/ -moz-box-shadow: inset 0px 3px 9px #171717; /* firefox */ box-shadow: inset 0px 3px 9px #171717;
border-top: 1px solid #666;
}


Replace all  2a5c75 with d5d7de and all 133747 with ffffff. You can also replace 171717 with cccccc if you like a more discret box shadow.

find:

Code Select Expand


.credits{
padding: 18px 0px 0px 10px;
line-height: 18px;
margin-left: 200px;
font-size: 9px;
text-shadow: 0px 1px 0px #111;
color:#4089ad;
}
.credits a{
color: #499dc5;
}


replace with:

Code Select Expand


.credits{
padding: 18px 0px 0px 10px;
line-height: 18px;
margin-left: 200px;
font-size: 9px;
text-shadow: 0px 1px 0px #ccc;
color:#000000;
}
.credits a{
color: #000000;
}


[allvip]

I first used css3 gradients from this site: http://www.css3factory.com/linear-gradients/, but they are not working with internet explorer browser. Not compatible so I edited reply#6.

[Daggers]

Thanks for the help mate, so very much appreciated.

Done the code changes like you listed but although it has changed the top bar the others are still the same.

[allvip]

Gallery link please. If you don't want to post it here then email me at allvip.us@gmail.com
Pay attention at  (for category): in my post: Reply #6.
You need to replace .catrow_noalb and .catrow classes.

[allvip]

as for the menu links I have found a way to add them in via html 5 edit in the inspect element feature of Chrome but cannot save the alterations.

inspect element feature of Chrome or firefox is for you to view the code, edit to see how it will look with the changes not to actually edit the page.

Open template.html and replace:

Code Select Expand


<div class="topmenu">{SUB_MENU}</div>


with:

Code Select Expand


<div class="topmenu">
  <ul>
    <li><a href="http://coppermine-gallery.net/" title="item1" target="_blank">Item 1</a></li>
    <li><a href="http://coppermine-gallery.net/" title="item2" target="_blank">Item 2</a></li>
  </ul>
  {SUB_MENU}
    </div>


Replace in the above code http://coppermine-gallery.net/ with your links and item1 with the name of your links. You can add how many item you want.

Open style.css and find:

Code Select Expand


.topmenu a:hover {
    color: #e8934f;
    text-decoration: none;
text-shadow: 0px 0px 8px #fff;
}


add under it:

Code Select Expand


.topmenu ul li{
    margin: 0px;
    padding: 0px;
list-style-type: none;
}
.topmenu ul {
    margin: 0px;
    padding: 0px;
}


[allvip]

I updated reply#6. My first way of aplying css gradients was not ok with internet explorer browser.

[allvip]

I noticed in your curvinosa/template.html:

Code Select Expand


<ul>
    <li><a href="http://www.facebook.com" title="item1" target="_blank">Facebook</a></li>
    <li><a href="http://www.ebay.co.uk" title="item1" target="_blank">eBay</a></li>
    <li><a href="http://www.flickr.com" title="item2" target="_blank">Flickr</a></li>
    <li><a href="http://www.pixlr.com" title="item2" target="_blank">Pixlr</a></li>
    <li><a href="http://www.amazon.co.uk" title="item2" target="_blank">Amazon</a></li>
    <li><a href="http://gallery.wirksworth-mines-research-group.co.uk/" title="item2" target="_blank">WMRG Gallery</a></li>
    <li><a href="http://www.wirksworth-mines-research-group.co.uk/" title="item2" target="_blank">WMRG</a></li>
    <li><a href="http://www.aditnow.co.uk" title="item2" target="_blank">Adit Now</a></li>
    <li><a href="http://www.mine-explorer.co.uk" title="item2" target="_blank">Mine Explorer</a></li>
    <li><a href="http://www.moorebooks.co.uk/" title="item2" target="_blank">Moore Books</a></li>
    <li><a href="http://www.pdmhs.com/default.asp" title="item2" target="_blank">PDMHS</a></li>
    <li><a href="http://www.namho.org/" title="item2" target="_blank">NAMHO</a></li>
    <li><a href="http://www.welshmines.org/" title="item2" target="_blank">Welsh Mines Society</a></li>
    <li><a href="http://www.ordnancesurvey.co.uk/business-and-government/help-and-support/web-services/os-openspace/web-map-builder.html" title="item2" target="_blank">Open Space Map</a></li>
  </ul>



change title="item1" and title="item2" with the name of your links. Example:

change:

Code Select Expand

<li><a href="http://www.facebook.com" title="item1" target="_blank">Facebook</a></li>

with:

Code Select Expand

<li><a href="http://www.facebook.com" title="Facebook" target="_blank">Facebook</a></li>

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element

[allvip]

I splitted the topic in two topics because is not about theme edits anymore.
You can find it here: Gallery not working - blank page http://forum.coppermine-gallery.net/index.php/topic,78296.0.html

[Daggers]

Hi Again

Not quite sure what is going on, but my gallery is now defaulting to the curve theme even though my config settings are set to curvinosa theme, this is only on Google chrome, on my ipad or internet explorer it still displays curvinosa theme as it should.

[Αndré]

Try to delete the "data" cookie in your browser.