NukeNav and NukeNav Block Arrows (solved)

Posted: Fri Mar 18, 2011 8:53 pm

While addressing the fact that I had missed altering the CSS for the NukeNav block Embarassed

, I realized I have black arrows on a nearly black background. This did not match the NukeNav menu above which uses white arrows.

Is this by design, and if so, is their a possibility to have the choice of arrows moved to the NukeNav.css file?

Black Arrows: /includes/jquery/css/images/arrows-000000.png
White Arrows: /includes/jquery/css/images/arrows-ffffff.png

Site Admin Joined: Jun 04, 2004 Posts: 6433

There is a default CSS for nukeNAV, but this can be overridden by the theme. Check some of the themes included with RavenNuke - there is at least one with white arrows.

Posted: Fri Mar 18, 2011 11:03 pm

kguske,

Thank you for a quick response Smile

I was able to locate several lines similar to this

Code:

.sf-sub-indicator{background:url(../../../includes/jquery/css/images/arrows-ffffff.png) no-repeat -10px -100px;}

in the nukeNAV.css. However on initial trial and error, I am only able to alter the image used across the horizontal Nav bar, and not of that inside of the Block.

Posted: Sun Mar 20, 2011 4:58 am

It should be called as nukeNAV not nukeNav if you want RN to load the file automatically.

Posted: Sun Mar 20, 2011 2:45 pm

Thank you Guardian. I corrected my typo above (I had not changed the name of the file). I spent some hours on it, and pretty much threw in the towel Embarassed

. When releasing a theme, I have many qualms/concerns about adding a read me with a lot of "goto this file and edit such and such. The theme changes should be located in the theme folder in my opinion. I would love to see all RN releases in the future have all theme related coding, images, and css within their respective files/folder.

On hindsight, I should have removed the white/dark/grey around .gif images so that they were transparent and were not so theme dependent. Sometimes when doing so, the edges of the icon images look very jagged and take a lot of time to fix.

An example, the white backgrounds on all of the admin icons/images (outside the theme folder). If they were to have no backgrounds, they would pretty much suit most themes. Perhaps I will work on that as a project, I am not sure anyone would be interested though lol.

Posted: Sun Mar 20, 2011 3:16 pm

TAd wrote:

Thank you Guardian. I corrected my typo above (I had not changed the name of the file). I spent some hours on it, and pretty much threw in the towel Embarassed

. When releasing a theme, I have many qualms/concerns about adding a read me with a lot of "goto this file and edit such and such. The theme changes should be located in the theme folder in my opinion. I would love to see all RN releases in the future have all theme related coding, images, and css within their respective files/folder.

Anything nukeNAV related can be overriden in your
themes/YOUR_THEME/style/nukeNAV.css

even if your theme has a customized nukeNAV.css it still is getting some declarations from the default includes/jquery/css/nukeNAV.css - unless you redeclare everything. this may be what you are looking for:

Code:

.nukeNAVmod .sf-sub-indicator {


    background: url("images/arrows-ffffff.png") no-repeat scroll -10px 0 transparent;


}

not sure on the positioning part as i dont have time to try atm, but seems like yours was an image src issue. so that should give a possibly new direction to try Wink

TAd wrote:

On hindsight, I should have removed the white/dark/grey around .gif images so that they were transparent and were not so theme dependent. Sometimes when doing so, the edges of the icon images look very jagged and take a lot of time to fix.

An example, the white backgrounds on all of the admin icons/images (outside the theme folder). If they were to have no backgrounds, they would pretty much suit most themes. Perhaps I will work on that as a project, I am not sure anyone would be interested though lol.

browser support for high quality png 24 images has improved. If your editor is capable, give them a try. try transparent shadows too Wink

Good for icons but don't use for large images as the file sizes get huge.

If you have photoshop v7+, try save for web, and select png 24 when saving.

Posted: Sun Mar 20, 2011 11:40 pm

Thank you Spasticdonkey.

I copied the original from one of the other nukNav.css files in another theme (then modified many times in order to get it to wokr). Of course the problem with snippets, is at times they only work when you place them in the correct position and know how they were implemented (entirely) which... I obviously could not seem to track down.

With your info above, and the original by kguske, I came up with this:

Code:

.nukeNAVmod .sf-sub-indicator {


    background:url(../../../includes/jquery/css/images/arrows-ffffff.png) no-repeat -10px -100px;


}

I placed it at the end of the .css file for that particular theme.

Which did the trick! Thank you Very Happy

Involved Joined: Feb 03, 2006 Posts: 269

You can also use your own arrows Wink

Code:

.sf-sub-indicator{background:url('../images/custom-arrows.png') no-repeat !important;}

Then just place the new arrows in your themes images folder

I wanted some orange one's once

Posted: Mon Mar 21, 2011 10:35 pm

Thank you xGSTQ,

My goal is to keep the 2 themes I have that are based on RavenIce as close to stock as possible. However, I will use that on my own site Smile

Thanks!

I really need to experiment more with nukeNav, I think this was a good start Smile