D7 Custom DesignBoxes and element.style

I am trying to control the style of an 'particular' page block on my website via a separate css file. It is the "Blogs" PHP block on my home page. I am having a few problems. Here is what I have done so far.

Step 1

In the database, on table sys_page_compose, I located the Blogs block row, for the index page (ID 174). I changed the value of the "DesignBox" field to 5 from 1.

Step 2

At location /templates/base/ I copied designbox_1.html to designbox_5.html. I opened designbox_5.html and change the text "disignBoxFirst" to "disignBoxFifth", then I changed "boxFirstHeader" to "boxFifthHeader". After which I saved the file.

Step 3

I changed directory to /templates/base/css and copied file common.css to a file called ibisf.css. I then opened the file and changed all occurences of "disignBoxFirst" to "disignBoxFifth", then I changed all occurences of "boxFirstHeader" to "boxFifthHeader". I then saved the file.

Step 4

I changed directory to / and opened up the index.php file and added the new ibisf.css stylesheet.

Step 5

I removed the sys_page_compose.inc file from the cache directory and cleared the cache via the admin panel.

Upon logging out of the admin panel and going to the main home page, things were almost as I expected apart from one thing. On the heading part of the blogs block, to the right hand side, there are two tabs called "Latest" and "Top". Either side of this text were 2 arrows pointing in opposite directions. See the image below. The top image is the text with the arrows and the bottom image is the text without the arrows. Basically the bottom image is how it should be.

I open up firebug to view the html and the CSS on "original" code. Below is what it displayed for the elements above.

So I then used firebug on the ""my changed code" code. Below is what it displayed.

So the difference I can see is that there appears to be an addional element.style entries on the original code when compared to my changed code. As I understand it this is possibly inserted by javascript. I am not an expert at this and so I am really just trying to work out how this hangs together in Dolphin 7 and where it is coming from. Also can you manually overide this in the new CSS file? Can anyone help please?

Thanks

bump

Hey mate!,

Nice job on the custom work done! Currently, your before and after have something very different about them. Your arrow item classes are missing their display:none properties!

The following should fix your issue if it is just static CSS and not needed for any javascript.

.dbTmRight, dbTmLeft {

background-position: center center;

background-repeat: no-repeat;

padding: 0 10px;

display: none;

}

From the screenshots, it looks like you have some javascript for showing/hiding the arrows or showing/hiding when needed for pagination. If this is the case, the error would be in the JS, not in the css. If a script is handling hiding/showing the arrows, it would be placing "display:none;" on the element via an in-line style.

Thanks for the reply I will have another go at this in the morning.

Thanks, the static CSS you suggested hard worked. It over rode the right arrow but not the left with your CSS:

.dbTmRight, dbTmLeft {

background-position: center center;

background-repeat: no-repeat;

padding: 0 10px;

display: none;

}

However when I split it into two different statement it worked for some reason:

.dbTmLeft {

background-position: center center;

background-repeat: no-repeat;

padding: 0 10px;

display: none;

}

.dbTmRight {

background-position: center center;

background-repeat: no-repeat;

padding: 0 10px;

display: none;

}

I still need to work out how and where the Java script kicks in to amend the priority of the CSS behaviour.

Any how. Thanks again.

Cheers

Paul