Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Configuring modules in a theme

Hey guys.

I'm working on my theme, and want my MeModule to be pretty much just like the one on here (Although in a different place). By default, the name is placed above the icons, instead of next to them. Also, the avatar is almost double the size that it is here.

Can anyone advise me on how I can safely modify it in my theme?

(Is there a live chat anywhere, such as IRC? This kind of question just feels really silly being posted on the forum...)

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Assuming you are using a modern browser (FF, Chrome, IE10+), you can inspect any element on any page by right clicking and selecting 'Inspect Element'. That will bring up your browsers DOM Inspector with the inspected element highlighted.

    There should be a style pane somewhere that shows you the CSS rules currently assigned to that element. It is on the right side of the inspector in FF. Once you know the rules, it is trivial to copy that over to your custom theme.

    In the attached photo, you can see the inspector open and the rules pane on the right. The selected element is selected on page and highlighted in the inspector.

    Getting comfortable with your browser's dev tools is essential to becoming a web developer, imo. Feel free to ask any specific questions about your dev tools here :)

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Aaah, so there's more complex HTML to be used for it then? Currently I'd just moved the default "{module name="MeModule"}" to the Header.
    I'll experiment around in a bit, thanks :)

  • hgtonighthgtonight ∞ · New Moderator

    @Flenix You should just need to add some CSS rules to your custom.css file. Meaning, no markup changes are required.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

Sign In or Register to comment.