365 results found

1. Size of box on events page

   I'm new to Wild Apricot and know nothing about CSS (or any other type!) of code.

   I want to change the size of the box on my Events page but have been told by support that they are fixed and can only be changed by changing the CSS code. Can anyone tell me how to do that?

   Gooosechop

   0 votes

   Vote Vote Vote

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

   Vote

   We’ll send you updates on this idea

   0 comments  ·  Edit…  ·  Delete…  ·  Admin →
   How important is this to you?

   Not at all You must login first! Important You must login first! Critical You must login first!

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

2. Social Login platform integration

   I am toying with the idea of using a social login product such as Janrain engage (http://www.janrain.com/products/engage/social-login ) as a way to increase my social media presence (I run a social club, so it make sense to optimise the use of social media for cross promotion).

   Has anyone tried this on any WA sites? I found a couple of posts asking about facebook connect and linkedin integration, but not much else.

   Surely it would be reasonably straight forward. I don't consider myself to be a developer, but know more than enough to get myself in and out of webworld trouble, so am curious to know if anyone else has had luck implementing this kind of thing to date before I take the plunge...!

   Cheers

   I am toying with the idea of using a social login product such as Janrain engage (http://www.janrain.com/products/engage/social-login ) as a way to increase my social media presence (I run a social club, so it make sense to optimise the use of social media for cross promotion).

   Has anyone tried this on any WA sites? I found a couple of posts asking about facebook connect and linkedin integration, but not much else.

   Surely it would be reasonably straight forward. I don't consider myself to be a developer, but know more than enough to get myself in and out of webworld… more

   0 votes

   Vote Vote Vote

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

   Vote

   We’ll send you updates on this idea

   0 comments  ·  Edit…  ·  Delete…  ·  Admin →
   How important is this to you?

   Not at all You must login first! Important You must login first! Critical You must login first!

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

3. custom style 1 in normal text block

   Hi,

   I applied Custom Style 1 to my gadgets, but I would also like the same look to the normal text block next to them. How can I do this?

   Thanks!

   Keith

   0 votes

   Vote Vote Vote

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

   Vote

   We’ll send you updates on this idea

   0 comments  ·  Edit…  ·  Delete…  ·  Admin →
   How important is this to you?

   Not at all You must login first! Important You must login first! Critical You must login first!

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

4. Stretch "Basic" Theme, from 2 columns, to 3 columns

   Hello, I was wondering if anyone would be able to help me stretch the "Basic" theme, from 2 columns, to add a 3rd column of equal size of the other 2. If anyone could help me with this it would be greatly appreciated.

   Thanks

   Sam

   0 votes

   Vote Vote Vote

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

   Vote

   We’ll send you updates on this idea

   0 comments  ·  Edit…  ·  Delete…  ·  Admin →
   How important is this to you?

   Not at all You must login first! Important You must login first! Critical You must login first!

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

5. Example of login box customization using Theme Overrides

   You might have noticed that a new capability called "Theme Overrides http://help.wildapricot.com/display/DOC/Theme+Overrides " was introduced in Wild Apricot release 4.2. Unfortunately, this unclear name actually hides quite an impressive set of functions to customize your site's visual behavior, much more expanded than it was before. I want to show you my own example of using of this technology so you can see how it has improved.

   Let us show the example of how login box is presented in Wild Apricot. While having fields to enter email and password on any page might be convenient in some cases, in other cases it might be distracting. I prefer to have just a simple link "Sign in" that leads to special page where I can enter required data to log in and then be redirected to appropriate page. In Wild Apricot before 4.2 release it was almost impossible - the HTML code was pre-built and you could only change it's appearance or hide completely. In new version, this can be very easily done.

   Here's what I did using Theme Overrides on my own site: http://ez.wildapricot.org . Note that I use this site regularly for testing of ideas, so it might be changed when you look at it live -- hopefully the screencaps here will help you understand this example.

   Not signed in mode

   In normal public mode I show just the "Sign in" link that leads to a page where email and password are requested. If you look at the HTML code of the template file below, this state is shown when "Model.Security.IsAuthorized" is "false."

   Signing in

   This what the user gets when he clicks on the "Sign in" link. Note that the link itself is hidden in this state. This due to the fact that "Model.IsHiddenOnPage" is "true" here, and the HTML code in the gadget's template file hides it in this state.

   Signed in - regular page (i.e. Home)

   After the user signs in, it shows only the name of current user as a link in standard blue color. Clicking on the link brings us to profile page. Signed in state is when "Model.Security.IsAuthorized" is "true".

   Signed in - profile

   This is the same link on the Profile page is still shown but in a different color - slightly dimmed. This state is when "Model.IsProfileLinkVisible" is "False".

   Here are the steps I used to create this. First of all, I enabled "Theme override" mode via Settings / Theme overrides (BETA) page. This action gave me an additional folder called "ThemeOverrides" in my WebDAV filders structure, containing the "transparentvertical" subfolder which is based on the name of the theme I use on my site. The folder name will be different for other themes. This is where the "Theme overrides" magic starts. Basically this folder contains all the HTML, CSS, JS and template files that are used to render my site's pages. By "overrides" we mean that instead of having thousands of files being shown in this folder (that are part of theme and all are required to show final page) and changing just a few of them, now you can just upload the files you want to change. The uploaded files "override" the default theme behavior. To understand the default theme behavior and get the files, you need to download the theme pack ZIP file from "Theme overrides (BETA)" in Settings. The pack contains the same folder structure as in your WebDAV but with all theme files, which you can then edit and upload as needed.

   In my case I needed to change the "LoginBox" gadget behavior, so I took default gadget template file containing the login box HTML code and changed it to my own code:

   Gadgets/Login.LoginBox/GadgetTemplate.tpl - new code <$if(!Model.IsHiddenOnPage)$> <div id="loginData"> <$if(Model.Security.IsAuthorized)$> <div id="loginData-authed"> <$if (!Model.IsSystemAdminView)$> <span class="decoration-brackets<$if(!Model.IsProfileLinkVisible)$> profilelink-inactive<$endif$>" ><a href="<$if (Model.IsAdminView)$><$Model.Urls.ContactDetails$><$else$><$Model.Urls.Profile$><$endif$>"><$Model.UserFullName$></a ></span> <$else$> <span class="decoration-brackets mode-systemadmin">Global admin mode</span> <$endif$> <form action="<$Model.Urls.SignOut$>" <$if(Model.IsAdminView)$>target="_top"<$endif$> method="post"> <input type="submit" size="20" value="<$Model.Text.LinkSignOutText$>" class="loginButton"> </form> </div> <$else$> <div id="loginData-notauthed"> <span class="decoration-brackets" ><a href="/Sys/Login">Sign in</a ></span> </div> <$endif$> </div> <$endif$> If you look into the default code you will see much more complicated code. I simplified it a lot as I do not need to keep the code for all themes but just my own, so I can make it simple and do the rest with CSS. Note that this not just HTML code - the template file uses special language that allows you to make your template file active, not passive, so you can check conditions of request environment and use model data to compose the response code. The language is very powerful so you can achieve nearly anything you want - see StringTemplate syntax http://help.wildapricot.com/display/DOC/Theme+files+language+syntax .

   To support my HTML code that I created in the gadget template file, I also added my own CSS file. I put the file into the "Styles" folder - all CSS files in this folder are automatically added into all system responses:

   Styles/ez.css - my own css file /************************************ Decorations ***********************************/ .decoration-brackets { color: #666; } .decoration-brackets:before { content: "["; padding-right: 0.4em; } .decoration-brackets:after { content: "]"; padding-left: 0.4em; } /********************************* Login box **************************************/ div#loginData { margin: 15px 0px 15px 0px; } div#loginData-notauthed a { text-transform: uppercase; } div#loginData-authed a { text-transform: capitalize; } div#loginData-authed .profilelink-inactive a, div#loginData-authed .profilelink-inactive.decoration-brackets { color: #999; } div#loginData-authed { margin-bottom: 7px; } div#loginData form input { margin-left: 0; margin-top: 5px; } div#loginData .mode-systemadmin { color: red; font-weight: bold; text-transform: uppercase; } This combination of HTML and CSS allows my site login behavior to work the way I want it - in public, member and admin modes.

   The true power here is that Theme Overrides gives you ability to change HTML code - not just CSS code as in previous versions. This makes overall customization experience much easier -- you can create your own themes now and make very simple HTML code for them, without all those nasty DIVs that were required in previous releases.

   Enjoy!

   You might have noticed that a new capability called "Theme Overrides http://help.wildapricot.com/display/DOC/Theme+Overrides " was introduced in Wild Apricot release 4.2. Unfortunately, this unclear name actually hides quite an impressive set of functions to customize your site's visual behavior, much more expanded than it was before. I want to show you my own example of using of this technology so you can see how it has improved.

   Let us show the example of how login box is presented in Wild Apricot. While having fields to enter email and password on any page might be convenient in some cases, in other cases… more

   0 votes

   Vote Vote Vote

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close

   Vote

   We’ll send you updates on this idea

   0 comments  ·  Edit…  ·  Delete…  ·  Admin →
   How important is this to you?

   Not at all You must login first! Important You must login first! Critical You must login first!

   We're glad you're here

   Please sign in to leave feedback

   Signed in as (Sign out)

   Close

   Close