Joomla Templates Club 406,261 posts

[mickalypickaly Friend mickalypickalyJoin date: November 2011Posts: 26Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#191184

I’m in the middle of switching my template from JA Social to JA Hawkstore. I have a script that centers automatically in JA Social but I cant’ get to center no matter what I try in JA Hawkstore. Here are some of the things I’ve tried.

<script src="http://forms.aweber.com/form/88/1165932688.js" align="center" type="text/javascript"></script>

<span align="center">
<script src="http://forms.aweber.com/form/88/1165932688.js" type="text/javascript"></script>
</span>

<div align="center">
<script src="http://forms.aweber.com/form/88/1165932688.js" type="text/javascript"></script>
</div>

<p align="center">
<script src="http://forms.aweber.com/form/88/1165932688.js" type="text/javascript"></script>
</p>

None of them are working. What I’m I doing wrong? Is there something in the template that needs to be changed?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#508135

Can you provide the url of the site you’re working on, as well as a screenshot of the element you are trying to center?

[mickalypickaly Friend mickalypickalyJoin date: November 2011Posts: 26Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#508162

Here is the URL http://www.poisonivymysteries.net/email-sign-up.html
This is what I want centered.

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#508178

Here’s a possible solution . . .

Within file path –> /ja_hawkstore/css/themes/custom/template.css
at line 3206, add a “padding-left” property – for example:


.item-page {
padding-left: 200px;
padding-top: 10px;
}

Not 100% sure how/if this will effect any other elements within your site that may be styled by the same CSS rule. Give it a try and see if it achieves the result you are looking for … you can always remove the modification if it doesn’t work out for you.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#508216

Or you can try with my solution

Open templates/ja_hawkstore/css/themes/custom/template.css file

From

.main-container {
padding: 20px 40px;
}

Change to

.main-container {
padding: 20px 40px;
margin: 0px auto;
width: 50%;
}

[mickalypickaly Friend mickalypickalyJoin date: November 2011Posts: 26Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#508280

Both suggestions work to center the element but they cause issues elsewhere. I had an idea to create a new class in the custom.css file. Using TomC’s suggestion in my custom class it shows up great on a desktop PC but on mobile browsers it shoots it way to the right. For some reason when I use Ninja Lead’s suggestion in my custom class it centers it but cuts the element in half. I don’t understand why it would show the full element when I add the coding to the .main-container class but when I create my own class it doesn’t show up correctly. What am I missing?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#508282

Is that particular element related to a particular module?

If so, you could try to create and apply a custom module class (CSS) for that particular module/element.

Here is a helpful tutorial on understanding how to use in Joomla.

[Author]

Posts