Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Additional menu links  (Read 7979 times)

0 Members and 1 Guest are viewing this topic.

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Additional menu links
« on: June 04, 2015, 01:20:09 pm »

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.

Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #1 on: June 04, 2015, 10:05:18 pm »

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.
Logged

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Re: Additional menu links
« Reply #2 on: June 04, 2015, 11:03:43 pm »

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

Cheers

Steve
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #3 on: June 04, 2015, 11:16:25 pm »

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/
« Last Edit: June 04, 2015, 11:30:26 pm by allvip »
Logged

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Re: Additional menu links
« Reply #4 on: June 05, 2015, 12:24:36 pm »

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  :)
Logged

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Re: Additional menu links
« Reply #5 on: June 05, 2015, 12:26:45 pm »

Forgot the new colour numbers, sorry.

Colour 1 = ded6de

Colour 2 = d5d7de
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #6 on: June 05, 2015, 02:21:42 pm »

Open style.css, find:

Code: [Select]
.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]
.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]
.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]
.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]
.catlink a {
    color : #fff;
text-transform: uppercase;
}

replace with:

Code: [Select]
.catlink a {
    color : #000000;
text-transform: uppercase;
}

find:

Code: [Select]
.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]
.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]
.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]
.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;
}
« Last Edit: June 05, 2015, 05:26:29 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #7 on: June 05, 2015, 02:31:25 pm »

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.
« Last Edit: June 05, 2015, 05:18:57 pm by allvip »
Logged

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Re: Additional menu links
« Reply #8 on: June 05, 2015, 02:38:28 pm »

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.

Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #9 on: June 05, 2015, 02:45:40 pm »

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.
« Last Edit: June 05, 2015, 03:32:51 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #10 on: June 05, 2015, 02:54:52 pm »

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]
<div class="topmenu">{SUB_MENU}</div>

with:

Code: [Select]
<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]
.topmenu a:hover {
    color: #e8934f;
    text-decoration: none;
text-shadow: 0px 0px 8px #fff;
}

add under it:

Code: [Select]
.topmenu ul li{
    margin: 0px;
    padding: 0px;
list-style-type: none;
}
.topmenu ul {
    margin: 0px;
    padding: 0px;
}
« Last Edit: June 05, 2015, 04:54:17 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #11 on: June 05, 2015, 05:20:31 pm »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #12 on: July 10, 2015, 01:54:11 pm »

I noticed in your curvinosa/template.html:

Code: [Select]
<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]
<li><a href="http://www.facebook.com" title="item1" target="_blank">Facebook</a></li>
with:

Code: [Select]
<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
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: Additional menu links
« Reply #13 on: July 10, 2015, 01:56:55 pm »

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
Logged

Daggers

  • Coppermine newbie
  • Offline Offline
  • Posts: 13
Re: Additional menu links
« Reply #14 on: July 14, 2015, 08:10:54 am »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15759
Re: Additional menu links
« Reply #15 on: July 15, 2015, 10:22:19 am »

Try to delete the "data" cookie in your browser.
Logged
Pages: [1]   Go Up
 

Page created in 0.03 seconds with 21 queries.