Custom Site Actions Link with CSS
Whenever there is a need to customize the look and feel of the default MOSS 2007 site actions control without going through several lines of code, CSS comes in handy.
The tricky part involves replacing the white arrow image which is hardcoded on the default control itself to reflect your design. If we look at the HTML that is rendered by the site actions control, we can see where the image is located inside the DOM.
whitearrow.gif
The idea is to first hide the hardcoded image from the view by setting its display to ‘none’. First we’ll have to travel the DOM to get access to the image(s) as there are no static class names or usable IDs available.
display: none;
}
Then put your newly designed pointer image on the site actions link using its background-property. This way it will be included in the hit-area of the button and you’ll also be able to use the :hover pseudo class which works even in the older browsers like IE6 for mouse over effects. Adjust the right padding and height to match your image properties.
background:
transparent url('/_layouts/images/arrow_inactive.png') 100% 50% no-repeat;
padding-right: 32px;
height: 32px;
float: left;
}
.ms-siteactionsmenu div div span a {
background-image: url('/_layouts/images/arrow_active.png');
}
For further customization you can also change the default background images and other properties for the site actions menu container with the following simple CSS selectors to match your design.
/* default gradient background */
}
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover {
/* hover gradient background */
}
Popularity: 3% [?]
Great post, going to send this link to my friends. Truly love it. THX.
Thank you so much. I spent a lot of time looking for this tip
Does this apply for sharepoint 2010
Hi Franco,
The original post applies to MOSS 2007. With SharePoint 2010 things are easier and you can set the ArrowImageUrl property in the master page:
runat="server"
accesskey="<%$Resources:wss,tb_SiteActions_AK%>"
id="SiteActionsMenuMain"
PrefixHtml=""
ArrowImageUrl="/_layouts/yoursite/images/arrow-down.gif"
SuffixHtml=""
MenuNotVisibleHtml="&nbsp;"
/>
Hi there! This post couldn’t be written much better! Looking through this article reminds me of my previous roommate! He always kept talking about this. I am going to forward this post to him. Pretty sure he’ll have a very good read.
Many thanks for sharing!
I am truly thankful to the owner of this web site who has shared this impressive paragraph at at this time.
Hello my family member! I want to say that this post is awesome, nice written and include almost all vital infos.
I’d like to peer extra posts like this .
What’s up, the whole thing is going perfectly here and ofcourse every one is sharing facts, that’s genuinely fine, keep
up writing.
Excellent post. I was checking constantly this weblog and I’m inspired! Extremely useful information particularly the closing phase
I take care of such info much. I used to be looking for this certain info for a very lengthy time. Thanks and best of luck.
I almost never leave comments, but after browsing a few of the responses here Custom Site Actions
And, if you are writing at other online sites, I’d like to follow you.
Link with CSS | SharePoint Blues. I do have a couple of questions for you if it’s okay. Is it simply me or do a few of the comments come across as if they are written by brain dead visitors?
Would you list of every one of all your social community pages
like your linkedin profile, Facebook page or twitter feed?
Hi there, I found your website via Google even as searching for a similar matter, your website came up,
it appears to be like great. I’ve bookmarked it in my google bookmarks.
Hello there, just become alert to your weblog thru Google, and located that it is really informative. I am going to watch out for brussels. I will appreciate should you proceed this in future. Many other folks might be benefited out of your writing. Cheers!
Have you ever thought about including a little bit more than just
your articles? I mean, what you say is fundamental and all.
But just imagine if you added some great photos or video clips to give your posts more, “pop”!
Your content is excellent but with pics and clips, this blog could undeniably be
one of the best in its field. Excellent blog!
It’s remarkable designed for me to have a web site,
which is helpful for my knowledge. thanks admin
Many people wanted to know if the Law of Attraction and the
Bible were compatible. Newton’s universal law of gravitation states
that every object in the Universe attracts another object with a force
that is directly proportional to the product of their masses and inversely proportional to the distance between the objects.
Many ‘smart’ men told him otherwise but he wouldn’t
believe it, regardless. But, if we do not feel it from within then it won’t be realized.
Think only good thoughts and don’t let other ‘what if’s’ distract you
from getting what you want.
Tämä on tietysti aivan erinomainen asia, johon sinun täytyy
päästä osalliseksi. Kun haluaa suomalaisia naisia, niin täältä niitä saa.
Μyös se, mitä kaikkea teette, οn täysin teidän päätettävissänne.
Feel free tօ visit mү web blog – seks ve ask
Your style is so unique in comparison to other people I have read stuff from.
I appreciate you for posting when you’ve got the opportunity, Guess
I will just book mark this web site.
Undeniably consider that which you stated. Your favorite justification seemed to
be at the net the easiest thing to consider of. I say to you,
I certainly get annoyed whilst folks think about worries that they just don’t
know about. You managed to hit the nail upon the top and defined out the entire thing without having
side effect , other folks could take a signal.
Will likely be back to get more. Thanks
Before you decide to go looking for a new car, take a moment and
draw out reveal budget that is the reason for all the bills you already pay terrorist
the procedure for sending the bucks starts here as
soon while you file your application.
Nice weblog right here! Also your web site quite a bit up fast!
What web host are you the usage of? Can I am getting your associate hyperlink to your host?
I wish my web site loaded up as quickly as yours lol
El servicio en sí es buenísimo desde cualquier
plataforma por la que accedamos.
Espero que lo tengan en cuenta.
Gratis.
I think the admin of this site is in fact working hard in support
of his site, as here every stuff is quality based material.
Bosch pone a su disposición dos posibilidades de envío para la reparación de la herramienta averiada: bien a través del distribuidor local bien enviando su herramienta averiada directamente al Servicio Técnico, pidiendo la recogida Online desde su dirección. Reparar su lavavajilla Bosch en Rivas-Vaciamadrid es fácil siempre que su reparación sea realizada por técnicos certificados. Mas de 18 años de experiencia nos avalan como una de las mejores empresas de servicio tecnico y asistencia tecnica de lavadoras Bosch en Rivas-Vaciamadrid aunque no somos el servicio tecnico oficial de la marca Bosch.