CODEWITHSUNDEEP
plonediazo
tadasajon
tadasajon

Reputation: 14856

Plone 4.2 - manually editing a diazo theme in order to change the default logo

I have installed a diazo theme for my Plone site. Now I need to change the default logo that is being used. In another question I was instructed to look at the rules.xml and index.html files that come in the theme's directory and to figure out how to change the logo by editing one of those files manually. However, I cannot figure out how to do this. These appear to be the relevant lines from my index.html file:

<div id="portal-header">
    <div id="portal-slogan">
        <span class="heightImmitator"></span><span>Free Theme for Plone</span>
    </div>
    <a id="portal-logo" title="Site1" href="/"><span class="heightImmitator"></span><img src="images/logoSchools.gif" alt="" title="" height="71" width="402"></a>
    <div id="portal-personaltools-wrapper">
        <h5 class="hiddenStructure">Personal tools</h5>
        <dl class="actionMenu deactivated" id="portal-personaltools">
            <dt id="anon-personalbar"><a style="cursor: pointer;" class="link-overlay" rel="#pb_1" href="/login" id="personaltools-login">Log in</a></dt>
        </dl>
    </div>
</div>

And these appear to be the relevant lines from my rules.xml file:

<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="href"/>
<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="title"/>
<replace css:content="#portal-logo img" css:theme="#portal-logo img" />

I guess that the "replace" line is telling the theme to replace one logo with another. However, it is not intuitive to me how I should edit these files to find the logo that I have uploaded. Incidentally, the image file that I have uploaded is called nav-home1.png and it is sitting in a directory called site-images which is in my home directory.

Upvotes: 0

Views: 1369

Answers (4)

pfraterdeus
pfraterdeus

Reputation: 3

I uploaded my logo image to the FS. I've got a develop-egg in {ZEOHOME}/src/ So, the image shows up like this:

/usr/local/Plone/zeocluster/src/quintagroup.theme.sunrain/quintagroup/theme/sunrain/static/images/theme_rain/PF-Sig.png

(See buildout tutorial for how to add a develop egg...)

In the theme's ..theme/sunrain/static/index.html file, use a direct reference like this:

<img src="/++theme++quintagroup.theme.sunrain/images/theme_rain/PF-Sig.png" alt="" title="PF Sig Logo" height="150" width="300"/>

The sizing info is right there in the <img.. /> tag. However, it seems to be important, after making any changes, to go to Plone's Theme Control Panel, and deactivate/reactivate the theme, so that it will re-process the Rules.

I have spent the past six hours trying to change the logo in a fresh Plone 4.2 (OK, I'm a bit rusty!)

Quintagroup just tells me to customize logo.png in the ZMI, but that seems so... 2002 ;-) I spent hours yesterday trying to use the 4.3 theme-TTW feature, only to find that SunRain seems to break when I create a TTW copy.

Since this seems to be a top user request, why is it still so absurdly hard to figure out? Should this not be a simple "Upload your new Logo Image" in the Themes Control Panel?

Upvotes: 0

h2o
h2o

Reputation: 513

I would suggest getting the static theme files provided by the theme egg. Then editing and packaging it as a zipped file (Use as guide -> http://pypi.python.org/pypi/plone.app.theming/1.0#packaging-themes). Then you can upload it from the Diazo control panel.

If you want to manipulate the zipped files within Plone, you can go to portal_resources in the ZMI and edit the files there. If you want to distribute the edited files, download it from the Diazo panel.

This is a bit of work for now, but the experience should dramatically change in Plone 4.3 as suggested by optilude.

For help in understanding Xpath, use: http://www.w3schools.com/xpath/default.asp Spend some time on the tutorials. It is really simple to understand.

Upvotes: 0

optilude
optilude

Reputation: 3548

If I were you (and taking my comment about where to do this above into account), I'd simply remove the <replace /> rule that's trying to pull Plone's logo in from the content and then edit your index.html to reference your image file directly (at this point, it's all just plain HTML).

Incidentally, you may benefit from reading a bit more about the Diazo rules and what they do, on http://diazo.org/. For a heads-up (even if textual) of what the in-Plone experience will be in Plone 4.3, see http://pypi.python.org/pypi/plone.app.theming.

Martin

Upvotes: 3

tadasajon
tadasajon

Reputation: 14856

My solution was to place my image file in the ~/Plone/buildout-cache/eggs/quintagroup.theme.schools-6.0.10-py2.7.egg/quintagr‌​oup/theme/schools/static/images directory and then comment out the line in rules.xml that tells index.html to replace the image, and then edit index.html so that it loaded my image instead of logoSchools.gif, which was previously indicated. This did the trick, but now my problem is that the theme is getting the sizing information from somewhere else, so the image is far too big. Adjusting the height and width attributes in index.html have no effect.

Upvotes: 0

Related Questions